- wujie 使用手册
- 使用简介
- 主应用配置
- 安装 wujie依赖
- main.js配置
- 是否开启预加载
- 生命周期函数 – lifecycle.js配置
- 子应用配置
- 跨域设置
- 运行模式
- 生命周期改造
- 在主应用中，使用wujie，将子应用引入到主应用中去
- 主应用配置
- 使用简介
wujie 使用手册
wujie 是一个基于 Web Component 容器 + iframe 沙箱的微前端方案。
能够完善的解决适配成本、样式隔离、运行性能、页面白屏、子应用通信、子应用保活、多应用激活、vite 框架支持、应用共享等问题。
无界支持多种项目的接入，如 react、vue 等
使用简介
主应用不限技术栈，只需引入 wujie、配置子应用路由并启动 wujie 即可。
wujie 针对 React 和 Vue 框架分别提供了 wujie-react wujie-vue2 wujie-vue3 依赖。
这里以 Vue2 为例。
主应用配置
安装 wujie依赖
pnpm i wujie -S
# vue2 框架
pnpm add wujie-vue2
# vue3 框架
# pnpm add wujie-vue3
# react 框架
# pnpm add wujie-react
main.js配置
// main.js
import Vue from 'vue'
import App from './App.vue'
//引入无界微前端
// vue2
import WujieVue from "wujie-vue2";
// vue3
// import WujieVue from "wujie-vue3";
import lifecycles from "../config/lifecycle";
const { setupApp, preloadApp, bus } = WujieVue;
Vue.use(WujieVue);
// const props = {
// jump: (name) => {
// router.push({ name });
// },
// };
//设置子应用demo
setupApp({
name: "vue3Child1",
url: "http://localhost:5173/",
exec: true,
// props,
fetch: function fetch(url, options) {
//console.log("fetch.url:=",url,options)
return window.fetch(url, { ...options, credentials: "omit" });
},
...lifecycles,
});
// 预加载
//preloadApp({
// name: "demo",
//});
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
是否开启预加载
注意：setupApp 设置子应用的name和 preloadApp 设置的name要一致。
预加载优势：预加载，可以极大的提升子应用首次打开速度
预加载劣势：
资源的预加载会占用主应用的网络线程池资源的预执行会阻塞主应用的渲染线程
一般来说，如果不是很介意打开的首屏时间，这里预加载可以不用加。
生命周期函数 – lifecycle.js配置
const lifecycles = {
beforeLoad: (appWindow) => console.log(`${appWindow.__WUJIE.id} beforeLoad 生命周期`),
beforeMount: (appWindow) => console.log(`${appWindow.__WUJIE.id} beforeMount 生命周期`),
afterMount: (appWindow) => console.log(`${appWindow.__WUJIE.id} afterMount 生命周期`),
beforeUnmount: (appWindow) => console.log(`${appWindow.__WUJIE.id} beforeUnmount 生命周期`),
afterUnmount: (appWindow) => console.log(`${appWindow.__WUJIE.id} afterUnmount 生命周期`),
activated: (appWindow) => console.log(`${appWindow.__WUJIE.id} activated 生命周期`),
deactivated: (appWindow) => console.log(`${appWindow.__WUJIE.id} deactivated 生命周期`),
loadError: (url, e) => console.log(`${url} 加载失败`, e),
};
export default lifecycles;
无界提供一整套的生命周期钩子供开发者调用
如果子应用没有做生命周期的改造，那么 beforeMount、afterMount、beforeUnmount、afterUnmount 这四个生命周期将不会调用
子应用配置
跨域设置
子应用改造，无界对子应用的侵入非常小，在满足跨域条件下子应用可以不用改造。
子应用的资源和接口的请求都在主域名发起，所以会有跨域问题。
所以这里，主应用和子应用，建议使用nginx进行代理，解决跨域的问题。
//主应用
location /main {
proxy_set_header Host $host;
proxy_pass http://127.0.0.1：8080;
}
//子应用
location /demo {
proxy_set_header Host $host;
proxy_pass http://127.0.0.1：8081;
}
运行模式
无界有三种运行模式：单例模式、保活模式、重建模式
其中保活模式、重建模式子应用无需做任何改造工作，单例模式需要做生命周期改造
生命周期改造
改造入口函数：
将子应用路由的创建、实例的创建渲染挂载到window.__WUJIE_MOUNT函数上
将实例的销毁挂载到window.__WUJIE_UNMOUNT上
如果子应用的实例化是在异步函数中进行的，在定义完生命周期函数后，请务必主动调用无界的渲染函数 window.__WUJIE.mount()
vue2
if (window.__POWERED_BY_WUJIE__) {
let instance;
window.__WUJIE_MOUNT = () => {
const router = new VueRouter({ routes });
instance = new Vue({ router, render: (h) => h(App) }).$mount("#app");
};
window.__WUJIE_UNMOUNT = () => {
instance.$destroy();
};
} else {
new Vue({ router: new VueRouter({ routes }), render: (h) => h(App) }).$mount("#app");
}
vue3
if (window.__POWERED_BY_WUJIE__) {
let instance;
window.__WUJIE_MOUNT = () => {
const router = createRouter({ history: createWebHistory(), routes });
instance = createApp(App);
instance.use(router);
instance.mount("#app");
};
window.__WUJIE_UNMOUNT = () => {
instance.unmount();
};
} else {
createApp(App).use(createRouter({ history: createWebHistory(), routes })).mount("#app");
}
在主应用中，使用wujie，将子应用引入到主应用中去
经过上面主应用和子应用的改造之后，就可以再主应用中，使用wujie，将子应用引入到主应用中去。
主应用，有这样的一个vue组件
wujieDemo.vue 页面使用WujieVue引用目标项目的页面
// wujieDemo.vue
<template>
<WujieVue
width="100%"
height="100%"
name="vue3Child1"
:url="vue3Child1Url"
/>
</template>
<script>
export default {
data() {
return {
vue3Child1Url: 'http://localhost:5173/',
}
},
</script>
注意，上面 WujieVue 使用的name要和 setupApp 设置的name，要对应。
参考文档：
https://juejin.cn/post/7262347509951889467
