乾坤微前端_微前端qiankun项⽬实践防踩坑指南作者：zxh1307
导语
最近在做微前端的项⽬ , 过程中真是踩了不少坑 , 在有限的资料中不断试错 , 默默⽆语两⾏泪 哈哈. 在此次将采坑部分都记录下来, 让更多的⼈少⾛点弯路 , 此项⽬使⽤ 蚂蚁⾦服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 {
storemit('microApp/changeCenter', appContent);
storemit('microApp/changeLoading', loading);
}
}
微应⽤注册
nginx部署前端项目下⽂中的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 id="app"><div id="nav"><div @click="onChangePage('/star/linjunjie')" >林俊杰div><div @click="onChangePage('/star/zhangyixin')" >张艺兴div>div><div id="su data(){return {
}
},computed:{//获取⼦应⽤HTML 数据
...mapState('microApp', ['content']),
...mapState('microApp', ['mircoAppLoading']),
},methods:{//定义跳转⽅法
onChangePage(url){console.log(uterGo(url, '我喜爱的男明星')
},
routerGo(href = '/', title = null, stateObj = {}) {window.history.pushState(stateObj, title, href);
},
}
}script>
⼦应⽤配置
关于⼦应⽤的配置相对较简单 , 不需要额外下载qiankun 主要将⽣命钩⼦ 导出即可
导出响应的⽣命钩⼦
导出 bootstrap、mount、unmount 三个⽣命周期钩⼦，以供主应⽤在适当的时机调⽤。注意，实例化路由时，判断当运⾏在qiankun环境
时，路由要添加前缀，前缀与主应⽤注册⼦应⽤函数genActiveRule("/subdemo")内的参数⼀致
'star' 值需要与主应⽤的值对应 genActiveRule("/star") 中的值需要商定好 主应⽤与微应⽤都要使⽤
如果 new VueRouter 不在main.js 中 配置 ，请将此配置移动到 main.js ⽅便管理
import routes from './router' //将路由信息导出⽅便使⽤
let router = null;
let instance = null;
function render(props = {}) {
const { container } = props;
router = new VueRouter({
base: window.__POWERED_BY_QIANKUN__ ? '/star' : '/',
mode: 'history',
routes,
});
instance = new Vue({
router,
store,
render: h => h(App),
}).$mount(container ? container.querySelector('#app') : '#app');
}
if (!window.__POWERED_BY_QIANKUN__) {
render();
}
export async function bootstrap() {
console.log('[vue] vue app bootstraped');
}
export async function mount(props) {
//props 包含主应⽤传递的参数也包括为⼦应⽤创建的节点信息
console.log(props)
render(props);
}
export async function unmount() {
instance.$destroy();
instance = null;
router = null;
}
配置微应⽤的打包⼯具
除了代码中暴露出相应的⽣命周期钩⼦之外，为了让主应⽤能正确识别微应⽤暴露出来的⼀些信息，微应⽤的打包⼯具需要在fig.js 中 增加如下配置:
const packageName = require('./package.json').name;
output: {
library: `${packageName}-[name]`,
libraryTarget: 'umd',
jsonpFunction: `webpackJsonp_${packageName}`,
},
};
⼦应⽤判断
⼦应⽤中新建 publicPath.js 在main.js 引⼊
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论