為什么使用無界: 筆者當(dāng)前項(xiàng)目是基于vue2 + vue-property-decorator構(gòu)建的(也就是vue2 + ts的寫法),之前寫的時(shí)候還是蠻舒服的.某一天領(lǐng)導(dǎo)想升級為vue3,遺憾的是vue-property-decorator并不支持vue3語法且其插件上次有效更新還是在2021年10月,那么單純的vue2升級vue3的路線便相當(dāng)曲折,所以便想到了使用微前端方式來實(shí)現(xiàn)慢慢升級目的

微前端框架選擇: 嘗試了京東micro-app,阿里的qiankun均對樣式隔離不夠完善.直到遇見了騰訊的無界并嘗試接入;使用;部署后決定就用它了

主應(yīng)用 webpack4 vue2 element-ui
子應(yīng)用 vite3 vue3 element-plus

主應(yīng)用配置:

安裝:

yarn add wujie-vue2

1. vue.config.js

devServer配置中添加  headers: { "Access-Control-Allow-Origin": "*" }  服務(wù)允許跨域

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"), // 對應(yīng)的映射
  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>

子應(yīng)用配置:

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腳本異步加載，應(yīng)用主動調(diào)用生命周期
  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")
}

更多相關(guān)資料查閱官網(wǎng) 無界
demo 無界