开始搭建

该文档适用于从0开始搭建微前端应用，学习微前端的demo

当前配置版本

"@umijs/plugin-qiankun": "^2.18.3",
"umi": "^3.3.3"

一、配置基座应用（主应用）

新建文件夹命名 mainAPP

进入mianApp执行以下命令

yarn create @umijs/umi-app // 使用umi官方工具创建项目
yarn // 安装依赖
yarn add @umijs/plugin-qiankun -D // 安装qiankun插件

注册qiankun，在.umirc.ts书写配置项

/mainApp/.umirc.ts

import { defineConfig } from 'umi';

export default defineConfig({
  nodeModulesTransform: {
    type: 'none',
  },
  routes: [
    { path: '/', component: '@/pages/index' },
		//注册子路由
    {
      name: 'app1',
      path: '/app1',
      microApp: 'app1',//对应上一步注册的name
    }
  ],
  //注册qiankun应用
  qiankun: {
    master: {
      // 注册子应用信息
      apps: [
        {
          name: 'app1', // 唯一 id
          entry: '//localhost:2000', // html entry
        },
      ],
    //   jsSandbox: true, // 是否启用 js 沙箱，默认为 false
    //   prefetch: true, // 是否启用 prefetch 特性，默认为 true
    },
  },
//新增配置项结束
});

也可以新建/mainApp/config/config.ts中配置以上配置，具体分离可参照umi文档umijs.org/zh-CN/docs/…

二、配置子应用

新建文件夹命名 microAPP1

进入microApp执行以下命令

yarn create @umijs/umi-app // 使用umi官方工具创建项目
yarn // 安装依赖
yarn add @umijs/plugin-qiankun -D // 安装qiankun插件

添加qiankun配置项

/microApp1/.umirc.ts

import { defineConfig } from 'umi';

export default defineConfig({
  nodeModulesTransform: {
    type: 'none',
  },
  routes: [
    { path: '/', component: '@/pages/index' },
  ],
  //以下为配置项
  qiankun: {
    slave: {}
  }
});

配置生命钩子（可选）

在/microApp/src下新建文件app.ts，复制以下内容

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);
    },
  };

将package.json中添加name属性

/microApp1/package.json

{
	//以下name为配置项，确保名称与主应用注册的微应用name保持一致
  "name": "app1",
  ...
}

配置端口，与主应用配置的端口保持一致

在microApp1目录下新建.env文件，编写以下内容

PORT=2000

为了标识子应用是否配置成功，遂将写成如下这样

/microApp1/src/page/index.tsx

import React from 'react';
import styles from './index.less';

export default () => {
  return (
    <div>
      <h1 className={styles.title}>子应用1</h1>
    </div>
  );
}

三、启动

运行子应用

进入microApp1执行

yarn start

打开浏览器输入localhost:2000看到

运行主应用

进入mainApp执行

yarn start

打开浏览器

切换子应用，将基座应用地址栏输入localhost:8081/app1，可以看到

说明微应用配置成功

四、相关文档

官方配置文档

umijs.org/zh-CN/plugi…