微前端之使用无界创建一个微前端项目

• 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