umi+qiankun微前端（2022/3/7 百分百成功搭建）

1.微前端，app1 为基座，app2为子项目 ，两个项目目录在同一级

2.分别创建umi项目-下载依赖-安装qiankun插件

yarn create @umijs/umi-app
yarn
yarn add @umijs/plugin-qiankun --dev

(部分文章说子项目不需要安装qiankun plugin是错误的)

3.app1
在.umirc.ts 中 注册子项目路由 ，注册qiankun应用

import { defineConfig } from 'umi';

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

4 app2
4.1在.umir.ts 添加乾坤配置

import { defineConfig } from 'umi';

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

4.2在app2项目根目录下添加 app.ts文件，暴露出生命周期

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

4.3 在package.json中添加name

 {
  "name": "app2",
  ....
}

4.4 因为两个项目的默认port是8000 ，修改app2的port 创建.env文件

PORT=2000