我的主应用和子应用都是用的umi3创建的

qiankun+umi配置实践

主应用配置

如果是umi项目可以直接使用@umijs/plugin-qiankun

我们这里使用qiankun的手动加载子应用

1. yarn add qiankun
2. 增加使用子应用的路由

const routes = [
  {
    path: '/',
    component: '../layouts/BasicLayout',
    routes: [
      { path: '/', name: '首页', component: '@/pages/index' },
+     {
+       path: '/qk', // 这个path需要下面子应用的path对应上
+       name: '乾坤页面',
+       component: '@/pages/qkTest/index',
+     },
    ],
  },
];

3. 在组件中../pages/qkTest/index引入子应用

import React, { useRef, useEffect } from 'react'
import { loadMicroApp } from 'qiankun';

export default function () {
  const containerRef = useRef()
  useEffect(() => {
    const microApp = loadMicroApp({
      name: 'qk',
      entry: 'http://10.23.111.173:8000', // 我本地启动的子项目
      container: containerRef.current, // 也可用结点选择器
    })
    return () => {
      microApp.unmount()
    }
  }, []);
  return <div ref={containerRef}></div>
}

到此主应用的基本能力已经配置好

子应用配置

1. yarn add @umijs/plugin-qiankun
2. 我用的umi创建的，增加配置

export default defineConfig({
  nodeModulesTransform: {
    type: 'none',
  },
  routes: [
  { path: '/qk', component: '@/pages/index' } // 这个path需要和上面主应用路由的path对应上
  ],
  fastRefresh: {},
+ qiankun: {
+   slave: {},
  },
});

最基本的功能完成

父子应用通信

qiankun官方通信方式 initglobalstatestate

这里使用一个比较灵活方便的方式，使用mitt

主应用配置

1. yarn add mitt
2. 增加loadMicroApp选项props，将emitter传入子应用

上线部署

主应用正常部署上线（当然要修改子应用的entry）

子应用需处理跨域问题： nginx配置增加 (根据具体需求修改)

add_header 'Access-Control-Allow-Origin' '*'; 
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS'; 
add_header 'Access-Control-Allow-Headers' '*'; 
add_header 'Access-Control-Allow-Credentials' 'true';