umi2升级到umi3，并接入qiankun

最新推荐文章于 2026-01-01 00:34:47 发布

原创最新推荐文章于 2026-01-01 00:34:47 发布 · 2.6k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

qiankun

本文介绍了如何将umi2项目升级到umi3，并成功接入微前端框架qiankun。过程中需要注意umi3中dva的使用、qiankun插件安装、配置文件变更以及umi3不再需要的钩子函数。同时提到了umi3与qiankun结合后可能遇到的redirect和样式问题。

qiankun 是一个基于 single-spa 的微前端实现库，旨在帮助大家能更简单、无痛的构建一个生产可用微前端架构系统。具体可看：https://qiankun.umijs.org/zh/guide

umi3可以顺利接入qiankun。但是umi2着实有些麻烦。所以最终我采取升级umi2到umi3再接入。

1. 升级umi2到umi3

npm uninstall -S dva antd
npm uninstall -D umi-plugin-react 
npm install -D umi@3 @umijs/preset-react

// package.json
"engines": {
	"node": ">=10.13.0"
}

// tsconfig.json
"paths": {
	"@/*": ["src/*"],
 	"@@/*": ["src/.umi/*"]
}

2. 如果你的项目里面没有用到dva, 那么src/app.ts 里面的dva就不需要写了，否则会报错dva的报错

3. 安装qiankun的插件：https://github.com/umijs/plugins/tree/master/packages/plugin-qiankun

npm install --save-dev @umijs/plugin-qiankun

4. umi里面的配置.umirc.ts更改：

qiankun: {
    slave: {},
  },

可以查看完整的配置：

import { defineConfig } from 'umi';
const isDev = process.env.NODE_ENV === 'development';
export default defineConfig({
  publicPath: isDev ? '/' : `//XXXXXXX/`,
  nodeModulesTransform: {
    type: 'none',
  },
  antd: {},
  locale: { antd: true },
  title: false,
  routes: [
    {
      path: '/',
      component: '../layouts/index',
      routes: [
        {
            key: '/manage',
            path: '/manage',
            component: './manage',
            name: '标签管理',
        },
        {
            key: '/search',
            path: '/search',
            component: './search',
            name: '用户标签查询',
        },
        {
            path: '/',
            redirect: '/manage',
        },
      ]
    }
  ],
  base: `usertags`, // 应用在父级的激活路由
  hash: true,
  qiankun: {
    slave: {},
  },
  theme: {
    'font-size-base': '13px',
    'font-family': 'PingFangSC-Regular, PingFang SC',
  }
});

5. umi3不需要写钩子函数了。之前不是umi框架的需要写下面这些

export const qiankun = {
  // 应用加载之前
  async bootstrap(props) {
    console.log('app1 bootstrap', props);
  },
  // 应用 render 之前触发
  async mount(props) {
    console.log('app1 mount', props);
  },
  // 应用卸载之后触发
  async unmount(props) {
    console.log('app1 unmount', props);
  },
};

如果是umi3就不需要写这些钩子函数了

6. 由于qiankun会在最外面包一层壳子，导致redirect的路由和样式都会有点问题。

#root-slave {
    height: calc(100vh);
}

routes: [
    {
      path: '/',
      component: '../layouts/index',
        routes: [
          {
              path: '/',
              component: '../pages/index',
              routes: [
                {
                    key: '/manage',
                    path: '/manage',
                    component: './manage',
                    name: '标签管理',
                },
                {
                    key: '/search',
                    path: '/search',
                    component: './search',
                    name: '用户标签查询',
                },
                {
                    path: '/',
                    redirect: '/manage',
                },
              ]
          }
        
      ]
   }
]


//改成如下：
routes: [
    {
      path: '/',
      component: '../layouts/index',
      routes: [
        {
            key: '/manage',
            path: '/manage',
            component: './manage',
            name: '标签管理',
        },
        {
            key: '/search',
            path: '/search',
            component: './search',
            name: '用户标签查询',
        },
        {
            path: '/',
            redirect: '/manage',
        },
      ]
    }
  ],