微前端qiankun示例 Umi3.5

主应用配置（基座）

1. 安装包
   npm i @umijs/plugin-qiankun -D
   配置 qiankun 开启

{"private": true,"scripts": {"start": "umi dev","build": "umi build","postinstall": "umi generate tmp","prettier": "prettier --write '**/*.{js,jsx,tsx,ts,less,md,json}'","test": "umi-test","test:coverage": "umi-test --coverage"},"gitHooks": {"pre-commit": "lint-staged"},"lint-staged": {"*.{js,jsx,less,md,json}": ["prettier --write"],"*.ts?(x)": ["prettier --parser=typescript --write"]},"dependencies": {"@ant-design/pro-layout": "^6.5.0","react": "17.x","react-dom": "17.x","umi": "^3.5.41"},"devDependencies": {"@types/react": "^17.0.0","@types/react-dom": "^17.0.0","@umijs/plugin-qiankun": "^2.43.3","@umijs/preset-react": "1.x","@umijs/test": "^3.5.41","lint-staged": "^10.0.7","prettier": "^2.2.0","typescript": "^4.1.2","yorkie": "^2.0.0"}
}

2. 注册子应用
   插件构建期配置子应用

export default {qiankun: {master: {// 注册子应用信息apps: [{name: 'app1', // 唯一 identry: '//localhost:7001', // html entry},{name: 'app2', // 唯一 identry: '//localhost:7002', // html entry},],},},
};

3. 装载子应用
   使用路由绑定的方式

export default {routes: [{path: '/',component: '../layouts/index.js',routes: [{path: '/app1',component: './app1/index.js',routes: [{path: '/app1/user',component: './app1/user/index.js',},
+            // 配置微应用 app1 关联的路由
+            {
+              path: '/app1/project',
+              microApp: 'app1',
+            },],},
+       // 配置 app2 关联的路由
+       {
+         path: '/app2',
+         microApp: 'app2'
+       },{path: '/',component: './index.js',},],},],
}

4. 主应用.umirc.ts整体配置：

import { defineConfig } from 'umi';export default defineConfig({nodeModulesTransform: {type: 'none',},routes: [{ path: '/', redirect: '/micro' },{path: '/micro',component: '@/pages/index',routes: [{path: '/micro/app1',microApp: 'app1',},],},{path: '/home',component: '@/pages/Home',},],fastRefresh: {},qiankun: {master: {// 注册子应用信息apps: [{name: 'app1', // 唯一 identry: '//localhost:8002/micro/*', // html entry},],},},
});

子应用配置

1. 安装包
   npm i @umijs/plugin-qiankun -D
   配置 qiankun 开启
2. 插件注册（config.js）

export default {qiankun: {slave: {},},
};

3. 配置运行时生命周期钩子（可选）
   插件会自动为你创建好 qiankun 子应用需要的生命周期钩子，但是如果你想在生命周期期间加一些自定义逻辑，可以在子应用的 src/app.ts 里导出 qiankun 对象，并实现每一个生命周期钩子，其中钩子函数的入参 props 由主应用自动注入。

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