【wujie】无界微前端框架在vue2中的使用

安装依赖

npm i wujie-vue2 -S

主应用

1. 创建wujie文件夹用于存放wuji框架相关js文件
   
2. 在index.js中引入wujie

import Vue from 'vue';
import lifecycles from "./lifecycle";
import { replaceWord } from "../auth";
import store from '@/store'

// 引入 wujiwvue
import WujieVue from "wujie-vue2";
const { setupApp, preloadApp } = WujieVue;
Vue.use(WujieVue);


// 获取当前窗口的 host 和路径信息
const { host, pathname, hash } = window.location;
// 计算 dapin 和 admin 的 URL
const dapinName = replaceWord(pathname, "/pc/", "/situation/"); // 将 /pc/ 替换为 /situation/，用于大屏
const dapinUrl = `//${host}${dapinName}${hash}`; 


// 设置 dapin 子应用
setupApp({
  name: 'dapin', // 子应用唯一标识
  url: dapinUrl, // 子应用入口URL
  exec: true,
  alive: true, // 是否开启保活模式
  fetch: (url, options) => window.fetch(url, { ...options, credentials: 'omit' }),
  prefix: { project_approval: '' },
  degrade:
    !window.Proxy ||
    !window.CustomElementRegistry,
  ...lifecycles // 引入生命周期钩子
});
// preloadApp({ name: 'dapin' }) // 此处为预处理，项目启动时就会加载

replaceWord() 方法

// 替换一段内容中指定的文字部分
export function replaceWord(text, oldWord, newWord) {
  // 使用全局正则表达式匹配所有出现的指定词
  const regex = new RegExp(oldWord, 'g');
  return text.replace(regex, newWord);
}

3. 在 lifecycle.js 中引入wujie的生命周期

// 生命周期函数 – 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) => {
    const routePath = router.currentRoute // 获取当前路由
    // 第一次加载微前端需要在该处将当前路由传给子应用
    WujieVue.bus.$emit(`to-${appWindow.__WUJIE.id}`, routePath);
  },
  deactivated: (appWindow) => console.log(`${appWindow.__WUJIE.id} deactivated 生命周期`),
  loadError: (url, e) => console.log(`${url} 加载失败`, e),
};
export default lifecycles;

4. 在 mian.js 中注册子应用

// 注册子应用
import "@/utils/wujie/index"

5. 创建一个页面用于显示子应用

<template>
  <!--单例模式，name相同则复用一个无界实例，改变url则子应用重新渲染实例到对应路由 -->
  <WujieVue width="100%" height="100%" name="dapin" />
</template>

<script>
import WujieVue from "wujie-vue2";
export default {
  data() {
    return {};
  },
  mounted() {
    // Wujie 保活模式，多个页面跳转同一个子应用的不同路由，需要采用通信方式将子应用的路径传递出去，由子应用自行变更路由
    WujieVue.bus.$emit("to-dapin", this.$route);
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
</style>

子应用

1. 在子应用的main.js 引入

// 无界框架在子应用的使用
if (window.__POWERED_BY_WUJIE__) {
  // 子应用监听事件
  window.$wujie?.bus.$on("to-dapin", route => {
    console.log('从主应用接收到的路由跳转方法,dapin', route);
    router.push(route.path)
  });

  // 无界环境下向根节点添加一个指定的CSS类名【此处为了解决在无界框架下elementUI弹框错位问题】
  // document.documentElement.classList.add("wujie")
  let instance;
  window.__WUJIE_MOUNT = () => {
    instance = new Vue({ router, store, render: (h) => h(App) }).$mount("#app");
  };
  window.__WUJIE_UNMOUNT = () => {
    instance.$destroy();
  };
} else {
  new Vue({ router, store, render: (h) => h(App) }).$mount("#app");
}

至此就可以实现了从主应用访问子应用

注意：在测试环境下wujie框架会存在跨域情况，正式环境可以正常访问