双Umi项目使用qiankun嵌套步骤

最新推荐文章于 2024-09-12 08:06:29 发布

SmoothJM

最新推荐文章于 2024-09-12 08:06:29 发布

阅读量2.2k

点赞数

文章标签： react

本文链接：https://blog.csdn.net/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起来的访问端口
        },
      ],
    },
},

整体看起来就是这样：
主应用qiankun配置

在 .umirc.ts 中：的defineConfig中的routes中，写对子应用的激活路由(就是你在主应用中访问哪个路由可以激活到子应用)：

routes: [
    {
      path: '/',
      component: '@/pages/index',
      routes: [
        { path: '/micro', component: './Micro', routes:[
          { name: 'app1', path: '/micro/app1', microApp: 'app1' }// 一
        ] },
        { name: 'app1', path: '/app1', microApp: 'app1' },// 二
      ],
    },
],

此处要注意的是，上述代码注释为一的地方是我们开头讲到的，通过主应用的一个组件里的子路由进行对子应用的激活，注意其path字段，要写全，而不是像之前写子路由那样不用写全，qiankun的配置要写全，不然无法访问子应用。
注释为二的是另一个路由访问子应用的配置。

子应用配置

子应用地址: localhost:8001
在 .umirc.ts 中：的defineConfig中写：

qiankun: {
    slave: {},
},

在package.json中写name属性为 app1 因为主应用所注册的子应用唯一id就是app1，要保持一致：

"name": "app1",

根据官网介绍，生命周期函数在umi项目中的添加为可选项，简化操作，我们就不配置了，如果希望配置，就在子应用的src目录下新建 app.ts并写上：

// 都是console.log，一看就可以不用配置[手动滑稽]
export const qiankun = {
    async bootstrap(props) {
      console.log('app1 bootstrap', props);
    },
    async mount(props) {
      console.log('app1 mount', props);
    },
    async unmount(props) {
      console.log('app1 unmount', props);
    },
};