为什么使用无界: 笔者当前项目是基于vue2 + vue-property-decorator构建的(也就是vue2 + ts的写法),之前写的时候还是蛮舒服的.某一天领导想升级为vue3,遗憾的是vue-property-decorator并不支持vue3语法且其插件上次有效更新还是在2021年10月,那么单纯的vue2升级vue3的路线便相当曲折,所以便想到了使用微前端方式来实现慢慢升级目的

微前端框架选择: 尝试了京东micro-app,阿里的qiankun均对样式隔离不够完善.直到遇见了腾讯的无界并尝试接入;使用;部署后决定就用它了

主应用 webpack4 vue2 element-ui
子应用 vite3 vue3 element-plus

主应用配置:

安装:

yarn add wujie-vue2

1. vue.config.js

devServer配置中添加  headers: { "Access-Control-Allow-Origin": "*" }  服务允许跨域

2. main.ts

import WujieVue from "wujie-vue2"
Vue.use(WujieVue)
const { setupApp } = WujieVue
setupApp({
  name: "authorization",
  url: hostMap("http://127.0.0.1:5173/crud"), // 对应的映射
  exec: true
})

3. 组件

<template>
  <WujieVue width="100%"
            height="100%"
            class="wujie"
            :url="url"
            :name="name"
            :props="{baseApp: 'wujie'}" />
</template>

<script>
export default {
  name: "FlowModel",
  data() {
    return {
      url: "http://127.0.0.1:5173/crud",
      name: "crud"
    }
  }
}
</script>

<style lang="scss" scoped>
.wujie {
  display: block;
  position: relative;
}
</style>

子应用配置:

if (window.__POWERED_BY_WUJIE__) {
  let instance: any
  window.__WUJIE_MOUNT = () => {
    const pinia = createPinia()
    instance = createApp(App)
      .use(router).use(ElementPlus).use(pinia).use(ui).use(FastCrud, {
        commonOptions() {
          return crudCommonConfig
        }
      })
    instance.mount("#app")
  }
  window.__WUJIE_UNMOUNT = () => {
    instance.unmount()
  }
  // module脚本异步加载，应用主动调用生命周期
  window.__WUJIE.mount()
} else {
  const app = createApp(App)
  const pinia = createPinia()
  app.use(router).use(ElementPlus).use(pinia).use(ui).use(FastCrud, {
    commonOptions() {
      return crudCommonConfig
    }
  }).mount("#app")
}

更多相关资料查阅官网 无界
demo 无界