应用

• 主应用 vue-cli搭建
• 微应用1 vue+webpack
• 微应用2 umi3

 

启动主应用控制台报错

Uncaught Error: application 'vue2' died in status LOADING_SOURCE_CODE: [qiankun] You need to export lifecycle functions in vue2 entry

 

原因

qiankun 抛出这个错误是因为无法从微应用的 entry js 中识别出其导出的生命周期钩子。

 

解决

参考 官方FAQ第一个问题

https://qiankun.umijs.org/zh/faq

 

微应用1的解决办法

在vue入口文件添加生命周期的钩子

 

 在webpack打包配置添加如下webpack配置

 

 

 

微应用2的解决办法

由于umi3框架中入口entry文件和webpack配置文件都封装好了，因此项目中没有明确的修改文件 只能参考umi3官方文档的插件 https://umijs.org/zh-CN/plugins/plugin-qiankun @umijs/plugin-qiankun 插件umi作为主应用和微应用配置都有，这里我们需要微应用配置即可解决这个问题 参考：umi作为子应用 https://zhuanlan.zhihu.com/p/90214542 这是umi-v2的参考 步骤：

• 安装插件 yarn add @umijs/plugin-qiankun -D
• 插件注册，在.umi.ts中添加 ： qiankun: { slave: {} }
• 配置运行时生命周期钩子：新增src/app.ts 添加qianku要求的子应用的钩子

export const qiankun = { // 应用加载之前 async bootstrap(props: any) { console.log('app1 bootstrap', props); }, // 应用 render 之前触发 async mount(props: any) { console.log('app1 mount', props); }, // 应用卸载之后触发 async unmount(props: any) { console.log('app1 unmount', props); }, };