为什么使用无界: 笔者当前项目是基于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
- vue.config.js
devServer配置中添加 headers: { "Access-Control-Allow-Origin": "*" } 服务允许跨域
- 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
})
- 组件
<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")
}
