邹城有做网站的吗,培训课程设计,响应式企业网站建设,张店网站优化无界微前端方案基于 webcomponent 容器 iframe 沙箱#xff0c;能够完善的解决适配成本、样式隔离、运行性能、页面白屏、子应用通信、子应用保活、多应用激活、vite 框架支持、应用共享等用户的核心诉求。 主项目安装无界 vue2项目#xff1a;npm i wujie-vue2 -S vue3项目… 无界微前端方案基于 webcomponent 容器 iframe 沙箱能够完善的解决适配成本、样式隔离、运行性能、页面白屏、子应用通信、子应用保活、多应用激活、vite 框架支持、应用共享等用户的核心诉求。 主项目安装无界 vue2项目npm i wujie-vue2 -S vue3项目npm i wujie-vue3 -S主项目main.js中引入无界
import Wujie from wujie-vue2
const { setupApp, bus: Wujiebus } Wujie
Vue.use(Wujie)主项目main.js中配置参数
setupApp({name: wujieSon,url: http://127.0.0.1:8085/, //子工程的访问地址exec: true,props: {jump: name {router.push({ name })}},sync: true,alive: true,// FeAnalytics重写了原生Fetch方法其入参接收的是 ObjectWujie在加载HTML时入参给了String的URL会报错。fetch: (url, options) {return window.fetch(url, { ...options, credentials: omit })},prefix: { project_approval: },// plugins,degrade:window.localStorage.getItem(degrade) true ||!window.Proxy ||!window.CustomElementRegistry// ...lifecycles
})4. 创建无界页面
template!--单例模式name相同则复用一个无界实例改变url则子应用重新渲染实例到对应路由 --WujieVuewidth100%height100%:propsgetProps()nameimmediatelyMan:urlsubAppPath/
/template
script
import WujieVue from wujie-vue2
// import * as Auth from /utils/auth.js
export default {computed: {subAppPath() {return http://127.0.0.1:8085/ //子工程访问路径}},mounted() {// Wujie 保活模式多个页面跳转同一个子应用的不同路由需要采用通信方式将子应用的路径传递出去由子应用自行变更路由WujieVue.bus.$emit(route-change, this.$route)},methods: {jump(name) {this.$router.push({ name })},getProps() {return {}}}
}
/script5. 子工程如果有跨域在vue.config.js中开启跨域访问。否则子工程不用做什么。
devServer: {headers: {Access-Control-Allow-Origin: * // 开启应用间的跨域访问},
}去中心化通信 无界提供多种通信方式window.parent 直接通信、props 数据注入、去中心化 EventBus 通信机制 1子应用 js 在和主应用同域的 iframe 内运行所以 window.parent 可以直接拿到主应用的 window 对象来进行通信。 2 主应用可以向子应用注入 props 对象里面可以注入数据和方法供子应用调用。 3 内置的 EventBus 去中心化通信方案可以让应用之间方便的直接通信。 上面案例中使用的是注入 props 对象的方式通信。 生命周期 无界提供完善的生命周期钩子供主应用调用 beforeLoad子应用开始加载静态资源前触发 beforeMount子应用渲染前触发 生命周期改造专用 afterMount子应用渲染后触发生命周期改造专用 beforeUnmount子应用卸载前触发生命周期改造专用 afterUnmount子应用卸载后触发生命周期改造专用 activated子应用进入后触发保活模式专用 deactivated子应用离开后触发保活模式专用
