接触qiankun框架也有一段时间了,一直没什么产出,这篇文章来源于组内同学的分享ppt,对于新人来说可能觉得没头没尾,希望大家见谅。虽然以下内容已在多个项目中得以验证,但是缺少部分小细节,大体思路如此,仅供参考思路
非常重要的3个钩子:
getQianKunConfig().then((result) => {
(window as any).qiankun.registerMicroApps(result.subApps, {
// beforeLoad: app => {
// console.log('before load app.name====>>>>>', app.name)
// },
// beforeMount: [
// app => {
// console.log('[LifeCycle] before mount %c%s', 'color: green;', app.name);
// },
// ],
// afterMount: [
// app => {
// console.log('[LifeCycle] after mount %c%s', 'color: green;', app.name);
// }
// ],
// afterUnmount: [
// app => {
// console.log('[LifeCycle] after unmount %c%s', 'color: green;', app.name);
// },
// ]
})
}).catch((err) => {
console.log(err);
});
const initState = {
user: {
}
};
// 状态管理
const actions = (window as any).qiankun.initGlobalState(initState);
actions.onGlobalStateChange((state, prev) => {
console.log();
})
actions.setGlobalState({
user: ''
});
(window as any).qiankun.start();
1:在根目录下增加.env文件,将项目开发阶段所对应的端口写入,例如:VUE_APP_PORT=8081
2:在src目录下新增文件public-path.js
3:修改router/index.js文件
原有的路由配置是将项目路由返回,微前端子应用模式必须返回的为路由数组。
4:修改入口文件main.js,引入publicPath文件以及export三个子应用生命周期
// import { HttpService } from './http/interceptors'
import animated from 'animate.css'
import $http from 'axios' // 给权限用,后续权限模块更改的时候换成共用的
import Echart from 'echarts'