乾坤 微前端_记一次 微前端qiankun项目实践!!!防踩坑指南
(给前端大学加星标，提升前端技能.)
作者：zxh1307
https://juejin.im/post/5ea55417e51d4546e347fda9
导语
最近在做微前端的项目 , 过程中真是踩了不少坑 , 在有限的资料中不断试错 , 默默无语两行泪 哈哈. 在此次将踩坑部分都记录下来, 让更多的人少走点弯路 , 此项目使用 蚂蚁金服qiankun 为基础作为开发 . 话不多说 开讲 !!!
那什么是 qiankun 呢
qiankun 是一个基于 single-spa 的微前端实现库，旨在帮助大家能更简单、无痛的构建一个生产可用微前端架构系统。
什么是微前端
微前端架构具备以下几个核心价值：
技术栈无关
主框架不限制接入应用的技术栈，微应用具备完全自主权
独立开发、独立部署
微应用仓库独立，前后端可独立开发，部署完成后主框架自动完成同步更新
增量升级
在面对各种复杂场景时，我们通常很难对一个已经存在的系统做全量的技术栈升级或重构，而微前端是一种非常好的实施渐进式重构的手段和策略
独立运行时
每个微应用之间状态隔离，运行时状态不共享
摘自 qiankun官方文档
主应用配置
此次项目 主应用与 子应用均为 vue ,
下载 qiankun
npm install qiankun
在主应用中注册微应用
// 导入乾坤函数
import {
registerMicroApps,
setDefaultMountApp,
start
} from "qiankun";
封装 render 方法
此方法在main.js 中要初始调用一次, 主要用来挂载主应用 , 之后子应用分别依次调用 ,所以故作判断. 传入的参数分别为 子应用 的 HTML 和 加载状态 content 字段 我们用 vuex 存储 起来,方便使用
let app = null;
function render({ appContent, loading }) {
if (!app) {
app = new Vue({
router,
store,
render: h => h(App),
}).$mount('#app');
} else {
store.commit('microApp/changeCenter', appContent);
store.commit('microApp/changeLoading', loading);
}
}
微应用注册
下文中的apps 可以为获取后数据 , 注册微应用 本文案例比较简单,方便大家理解 ,
在注册自应用的参数 ** container 与 render** 踩坑比较多,下边会着重讲解.
function genActiveRule(routerPrefix) {
return location => location.pathname.startsWith(routerPrefix);
}
//传递给子应用的数据
let msg = {
data:'修炼爱情的辛酸,学会放好以前的渴望'
}
let apps = [
{
name: 'linjunjie',
entry: '//localhost:215', // 改成自己子应用的端口号
container:'#subView', //节点 id // 沙盒模式
// render:render, // 普通模式
activeRule: genActiveRule('/star'),
props:msg
}
]
//注册的子应用 参数为数组
registerMicroApps(apps,{
beforeLoad: [
app => {
console.log(app)
console.log('[LifeCycle] before load %c%s', 'color: green;', app.name);
},
],
beforeMount: [
app => {
console.log('[LifeCycle] before mount %c%s', 'color: green;', app.name);
},
],
afterUnmount: [
app => {
console.log('[LifeCycle] after unmount %c%s', 'color: green;', app.name);
},
],
});
setDefaultMountApp('/star/linjunjie')
//开启沙盒模式
start({
sandbox :{
strictStyleIsolation: true}
})
当微应用信息注册完之后，一旦浏览器的 url 发生变化，便会自动触发 qiankun 的匹配逻辑，所有 activeRule 规则匹配上的微应用就会被插入到指定的 container 中，同时依次调用微应用暴露出的生命周期钩子。
主应用为子应用准备的 展示元素
林俊杰div>张艺兴div>div>div>div>template>