如何使用@umijs/plugin-qiankun搭建微前端项目

news2025/4/1 6:43:00

@umijs/plugin-qiankun是一个基于UmiJS框架的插件，用于实现乾坤微前端架构。乾坤微前端是一种前端架构模式，可以将一个大型的前端应用拆分成多个小型的子应用，每个子应用可以独立开发、独立部署、独立运行，同时可以通过乾坤框架进行整合和协同工作。

@umijs/plugin-qiankun插件提供了一些工具和API，可以帮助开发者快速搭建乾坤微前端架构，包括：

子应用注册：可以通过插件提供的API将子应用注册到乾坤框架中。
子应用路由：可以通过插件提供的API设置子应用的路由信息。
子应用通信：可以通过插件提供的API实现子应用之间的通信。
共享状态：可以通过插件提供的API实现子应用之间的状态共享。
打包构建：可以通过插件提供的工具进行子应用的打包构建。

需要注意的是，@umijs/plugin-qiankun插件只是乾坤微前端架构的一部分，还需要结合乾坤框架和其他相关工具一起使用，才能实现完整的微前端架构。

下面我们就来实战一下如何利用@umijs/plugin-qiankun搭建微前端项目

我们使用umi脚手架搭建三个项目，分别命名为master-app，my-app1，my-app2，umi脚手架搭建项目步骤如下：

在这里插入图片描述

主应用配置

新建 src/layouts/index.tsx，代码如下：

import React from 'react'
import {Link} from 'umi'

const Layout:React.FC = ({children}) => {
  return (
    <div>
      <div>
        <div>
          <Link to="/subApp1">子应用1</Link>
        </div>
        <div>
          <Link to="/subApp2">子应用1</Link>
        </div>
      </div>
      {children}
    </div>
  )
}

export default Layout

安装 @umijs/plugin-qiankun依赖

yarn add @umijs/plugin-qiankun -D

配置umirc.ts

import { defineConfig } from 'umi';

export default defineConfig({
  nodeModulesTransform: {
    type: 'none',
  },
  routes: [
    { path: '/', component: '@/pages/index' },
  ],
  fastRefresh: {},
  qiankun: {
    master: {
      // 注册子应用信息
      apps: [
        {
          name: 'subApp1',
          entry: 'http://localhost:8001',
        },
        {
          name: 'subApp2',
          entry: 'http://localhost:8002',
        },
      ],
      // 配置微应用关联的路由
      routes: [
        {
          path: '/subApp1',
          microApp: 'subApp1',
        },
        {
          path: '/subApp2',
          microApp: 'subApp2',
        },
      ],
    },
  },
});

子应用配置

安装 @umijs/plugin-qiankun依赖

yarn add @umijs/plugin-qiankun -D

配置umirc.ts

import { defineConfig } from 'umi';
export default defineConfig({
  nodeModulesTransform: {
    type: 'none',
  },
  routes: [
    { path: '/', component: '@/pages/index' },
  ],
  fastRefresh: {},
  qiankun: {
    slave: {}, // 必写
  },
});