关于前端:umi-qiankun-动态注册子应用解决方案

21次阅读

共计 1176 个字符，预计需要花费 3 分钟才能阅读完成。

首发于 语雀文档 @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 文件夹下新建 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
    });
  });

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

正文完