前端微应用qiankun框架集成参考

接触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'
// 引入qiankun