随着项目的迭代，项目越来越庞大，使用的技术比较落后，难道要沿用老旧技术吗？ 不想用呢？怎么办？ 那就用使用微前端技术吧。微前端的核心价值在于 "技术栈无关"，这才是它诞生的理由，或者说这才是能说服我采用微前端方案的理由。
满足以下几点，你才确实可能需要微前端
- 系统本身是需要集成和被集成的 一般有两种情况：
a. 旧的系统不能下，新的需求还在来。
没有一家商业公司会同意工程师以单纯的技术升级的理由，直接下线一个有着一定用户的存量系统的。而你大概又不能简单通过 iframe 这种「靠谱的」手段完成新功能的接入，因为产品说需要「弹个框弹到中间」
b. 你的系统需要有一套支持动态插拔的机制。
这个机制可以是一套精心设计的插件体系，但一旦出现接入应用或被接入应用年代够久远、改造成本过高的场景，可能后面还是会过渡到各种微前端的玩法。 - 系统中的部件具备足够清晰的服务边界
通过微前端手段划分服务边界，将复杂度隔离在不同的系统单元中，从而避免因熵增速度不一致带来的代码腐化的传染，以及研发节奏差异带来的工程协同上的问题。
qiankun 是根据路由劫持来实现的，只要设定好路由、挂载的子节点以及入口就可以了，是不是听起来很简单？ 我试图初步实现了下
初步实现
- 首先用vue-cli 下载个项目，记得选上路由
vue create mainApp // 作为主应用
vue create child // 作为子应用
- 主应用需要下载 qiankun
yarn add qiankun
- 修改主应用 App.vue
<template>
<div id="mainApp">
<nav>
<router-link to="/">基于应用自己主页</router-link> |
<router-link to="/child">子应用</router-link>
</nav>
<router-view />
<!-- 子应用挂载的节点 -->
<div id="childApp"></div>
</div>
</template>
<style>
#mainApp {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
注意： 这里需要将 id=‘app’ 改成别的名字或删除掉，否则会报错，如下内容：
'xxxx' died in status NOT_MOUNTED: [qiankun]: Target container with #childApp not existed after xxxx mounted!
- 修改主应用main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
// Vue.config.productionTip = false
// 引入qiankun
import { registerMicroApps,start } from 'qiankun'
// 注册app列表
const apps = [
{
name:'child',
entry:'//localhost:9999', // 自动接在，解析js.动态执行，需要解决跨域
container:'#childApp', // 子应用挂载元素
activeRule:'/child',// 访问规则
props:{
a:1
}
}
]
registerMicroApps(apps) // 可以按需设置生命周期方法
start() // 在调用页面加载
new Vue({
router,
render: h => h(App),
}).$mount('#app')
- 修改主应用路由router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'home',
component: HomeView
},
]
const router = new VueRouter({
mode: 'history',
base: '',
routes
})
export default router
下面我们开始改子应用代码，子应用不需要下载 qiankun，需要修改的地方如下：
- 修改子应用的main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
Vue.config.productionTip = false
console.log("子应用····")
/* eslint-disable */
let instance = null
function render(props) {
instance = new Vue({
router,
render: h => h(App)
}).$mount('#app'); // 这里是挂载到自己的html中 基座会拿到这个挂载后的html 将其插入进去
}
if (window.__POWERED_BY_QIANKUN__) { // 动态添加publicPath
__webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}
if (!window.__POWERED_BY_QIANKUN__) { // 默认独立运行
render();
}
// 父应用加载子应用，子应用必须暴露三个接口：bootstrap、mount、unmount
// 子组件的协议就ok了
export async function bootstrap(props) {
};
export async function mount(props) {
render(props)
}
export async function unmount(props) {
instance.$destroy();
}
- 修改 vue.config.js
module.exports = {
devServer: {
port:9999,
headers:{
'Access-Control-Allow-Origin':'*' // 允许跨域
}
},
configureWebpack: {
output: {
library:'child', // 同package.json中名字相同
libraryTarget:'umd'
}
}
}
- 修改router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'home',
component: HomeView
},
{
path: '/about',
name: 'about',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
}
]
const router = new VueRouter({
mode: 'history',
base: '/child', // 同主应用中的activeRule相同
routes
})
export default router
效果如下图
image.png
image.png
注意： 目前发现，主应用和子应用中的样式隔离问题需要注意下
