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 (
    <div>
      <h1 className={styles.title}>Umi-Micro Page</h1>
    </div>
  );
}