前言

首发于 语雀文档@blueju

<br />本篇文章可以被视为上一篇文章（https://www.yuque.com/blueju/blog/huuie8）的延续，上一篇文章大致讲述了搭建一个简易微前端平台的过程，其中关于子应用注册的配置是通过硬编码的方式，在构建打包前写入的。<br /> <br />但是真实项目中，更需要的是动态注册子应用，比如说我正参与的这个项目。<br /> <br />本篇文章的示例代码是基于上一篇文章示例代码改动的，上一篇文章示例代码对应的 GitHub 地址是：https://github.com/blueju/umi-qiankun/tree/umi-micro-fe-platform<br /> <br />代码修改集中在主应用，子应用不需要修改代码。 <a name="TvUFG"></a>

删除之前直接写死的子应用注册配置

官网文档中缺少该部分配置。 以下代码中，- 代表删除该行。 config/config.ts

1export default defineConfig({
2  ...
3  qiankun: {
4    master: {
5      - apps: [
6      -   {
7      -     name: 'sub-app-1',
8      -     entry: '//localhost:8001',
9      -   }
10      - ]
11    }
12  }
13})

<a name="eRueJ"></a>

配置Mock

在 mock 文件夹下新建 config.ts，写入以下代码：

1export default {
2  '/api/config': {
3    apps: [
4      {
5        name: 'sub-app-1',
6        entry: '//localhost:8001',
7      },
8    ],
9  },
10};

<a name="E0F4m"></a>

配置运行时动态注册子应用

参考： https://umijs.org/zh-CN/plugins/plugin-qiankun#b-运行时动态配置子应用（srcappts-里开启） 个人认为 Umi 官网中的写法并不是那么好懂。

在 src 文件夹下新建 app.ts，写入以下代码：

1// 从接口中获取子应用配置，export 出的 qiankun 变量是一个 promise
2export const qiankun = fetch('/api/config')
3  .then((res) => {
4    return res.json();
5  })
6  .then(({ apps }) => {
7    return Promise.resolve({
8      // 注册子应用信息
9      apps,
10      // 完整生命周期钩子请看 https://qiankun.umijs.org/zh/api/#registermicroapps-apps-lifecycles
11      lifeCycles: {
12        afterMount: (props) => {
13          console.log(props);
14        },
15      },
16      // 支持更多的其他配置，详细看这里 https://qiankun.umijs.org/zh/api/#start-opts
17    });
18  });

<a name="YN0wh"></a>

效果

<a name="LsJUw"></a>

GitHub

https://github.com/blueju/umi-qiankun/tree/runtime-dynamic-register-sub-app<br />