主应用配置(基座)
安装包 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" }
}
注册子应用 插件构建期配置子应用
export default { qiankun: { master: { apps: [ { name: 'app1' , entry: '//localhost:7001' , } , { name: 'app2' , entry: '//localhost:7002' , } , ] , } , } ,
} ;
装载子应用 使用路由绑定的方式
export default { routes: [ { path: '/' , component: '../layouts/index.js' , routes: [ { path: '/app1' , component: './app1/index.js' , routes: [ { path: '/app1/user' , component: './app1/user/index.js' , } ,
+
+ {
+ path: '/app1/project' ,
+ microApp: 'app1' ,
+ } , ] , } ,
+
+ {
+ path: '/app2' ,
+ microApp: 'app2'
+ } , { path: '/' , component: './index.js' , } , ] , } , ] ,
}
主应用.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' , entry: '//localhost:8002/micro/*' , } , ] , } , } ,
} ) ;
子应用配置
安装包 npm i @umijs/plugin-qiankun -D 配置 qiankun 开启 插件注册(config.js)
export default { qiankun: { slave: { } , } ,
} ;
配置运行时生命周期钩子(可选) 插件会自动为你创建好 qiankun 子应用需要的生命周期钩子,但是如果你想在生命周期期间加一些自定义逻辑,可以在子应用的 src/app.ts 里导出 qiankun 对象,并实现每一个生命周期钩子,其中钩子函数的入参 props 由主应用自动注入。
export const qiankun = { async bootstrap ( props) { console . log ( 'app1 bootstrap' , props) ; } , async mount ( props) { console . log ( 'app1 mount' , props) ; } , async unmount ( props) { console . log ( 'app1 unmount' , props) ; } ,
} ;