双Umi项目使用qiankun嵌套步骤

最新推荐文章于 2025-04-10 10:05:48 发布

SmoothJM

最新推荐文章于 2025-04-10 10:05:48 发布

阅读量2.4k

点赞数

文章标签： react

本文链接：https://blog.youkuaiyun.com/weixin_42027605/article/details/119345761

版权

写在前面

官方文档写的简简单单却暗藏玄机，所以从使用者的角度来说感觉有一些会被忽略的点没有被重点突出，所以记录一下我用双Umi项目进行主/子应用的嵌套。我最开始参考的文章是：AntdPro(主)+Umi使用qiankun搭建主/子应用: link. 是可以成功，但是当我使用umi的时候，把子应用放在主应用中一个组件的子路由中激活的时候出现了问题，所以记录一下搭建步骤。

准备

主应用为Umi项目，子应用为Umi项目。默认各位巨佬已经创建umi项目与安装qiankun插件，此处就不再赘述。写上安装代码好了, 注意：主/子应用都要安装：

yarn add @umijs/plugin-qiankun -D

主应用配置

主应用地址： localhost:8000
在 .umirc.ts 中：的defineConfig中写：

qiankun: {
   
    master: {
   
      apps: [
        {
   
          name: 'app1', // 子应用的ID，必写
          entry: '//localhost:8001', // 子应用的地址，必写,此处的8001是子应用run起来的访问端口