前言
首发于 语雀文档@blueju
本篇文章可以被视为上一篇文章(https://www.yuque.com/blueju/blog/huuie8)的延续,上一篇文章大致讲述了搭建一个简易微前端平台的过程,其中关于子应用注册的配置是通过硬编码的方式,在构建打包前写入的。
但是真实项目中,更需要的是动态注册子应用,比如说我正参与的这个项目。
本篇文章的示例代码是基于上一篇文章示例代码改动的,上一篇文章示例代码对应的 GitHub 地址是:https://github.com/blueju/umi-qiankun/tree/umi-micro-fe-platform
代码修改集中在主应用,子应用不需要修改代码。
删除之前直接写死的子应用注册配置
官网文档中缺少该部分配置。
以下代码中,- 代表删除该行。
config/config.ts
export default defineConfig({
...
qiankun: {
master: {
- apps: [
- {
- name: 'sub-app-1',
- entry: '//localhost:8001',
- }
- ]
}
}
})
配置Mock
在 mock 文件夹下新建 config.ts,写入以下代码:
export default {
'/api/config': {
apps: [
{
name: 'sub-app-1',
entry: '//localhost:8001',
},
],
},
};
配置运行时动态注册子应用
参考:
https://umijs.org/zh-CN/plugins/plugin-qiankun#b-运行时动态配置子应用(srcappts-里开启)
个人认为 Umi 官网中的写法并不是那么好懂。
在 src 文件夹下新建 app.ts,写入以下代码:
// 从接口中获取子应用配置,export 出的 qiankun 变量是一个 promise
export const qiankun = fetch('/api/config')
.then((res) => {
return res.json();
})
.then(({
apps }) => {
return Promise.resolve({
// 注册子应用信息
apps,
// 完整生命周期钩子请看 https://qiankun.umijs.org/zh/api/#registermicroapps-apps-lifecycles
lifeCycles: {
afterMount: (props) => {
console.log(props);
},
},
// 支持更多的其他配置,详细看这里 https://qiankun.umijs.org/zh/api/#start-opts
});
});
效果
GitHub
https://github.com/blueju/umi-qiankun/tree/runtime-dynamic-register-sub-app