umi3 + qiankun 搭建微前端

本文介绍 qiankun 的主应用和微应用都使用 umi3 搭建。

• umi3 + qiankun 开发篇
• umi3 + qiankun 部署篇
• umi3 + qiankun 组件篇
• umi3 + qiankun 工具篇

1. 主应用

创建主应用，安装依赖包

$ mkdir umi-main
$ cd umi-main
$ yarn create @umijs/umi-app
$ yarn
$ yarn add @umijs/plugin-qiankun -D

修改启动端口号：根目录下创建 .env 文件，内容如下：

PORT=8300

修改 .umirc 配置文件

import { defineConfig } from 'umi';

export default defineConfig({
  qiankun: {
    master: {
      apps: [
        {
          name: 'micro',                                // 微应用名称
          entry: '//localhost:8301',        // 微应用入口文件
        }
      ]
    }
  },
  routes: [
    { exact: true, path: '/', component: '@/pages/index' },
    { 
      path: '/micro', 
      microApp: 'micro',        // 当访问路由为 /micro，主应用实际访问名称为 micro 的微应用
    },
  ],
});

2. 微应用

创建微应用

$ mkdir umi-micro
$ cd umi-micro
$ yarn create @umijs/umi-app
$ yarn
$ yarn add @umijs/plugin-qiankun -D

修改微应用启动端口，创建 .env 文件，内容如下：

PORT=8301

修改 .umirc 配置文件

import { defineConfig } from 'umi';

export default defineConfig({
  // 加这个属性，就不用在入口文件 src/app.ts 中写 qiankun 生命周期函数了
  qiankun: {
    slave: {},
  },
  // 加这个属性，静态资源访问前缀
  publicPath: '/micro/',
  routes: [
    { path: '/', component: '@/pages/index' },
  ],
});

修改 package.json 文件，去除 private 属性，添加 name 属性，否则启动会报错 You should have name in package.json

-- "private": true,
++ "name": "umi-micro",

修改页面内容，以区别于主应用 src/pages/index.tsx

import styles from './index.less';

export default function IndexPage() {
  return (
    

      
Umi-Micro Page
    
  );
}

3. 测试

先启动微应用，访问 http://localhost:8301/

image.png

启动主应用，访问 http://localhost:8300/

image.png

还是主应用的端口，访问 /micro 路由，可以看到页面中显示的是微应用的页面，环境搭建成功

image.png

至此，开发已经没问题了，但是后面部署还会遇到问题，这个下篇文章再介绍。