业务场景：主应用vue，子应用react18+umi，使用乾坤嵌入子应用页面（子应用目前只有一个页面）
主应用（vue）工作
- 首先，在主应用vue中安装qiankun依赖
yarn add qiankun 或者 npm i qiankun --save
- 创建需要嵌入子应用的页面或者组件
<template><div id="integrate-container" class="integrate-page"></div>
</template><script>
export default {name: 'IntegrateContainer',
};
</script><style lang="less">
.integrate-page {width: 100%;height: 100%;min-height: 100vh;border: 0;background: linear-gradient(180deg, #001034 0%, #000512 100%);
}
</style>
- 在main.js注册qiankun
// 微应用的注册信息
import { registerMicroApps, start } from 'qiankun';
registerMicroApps([{// 微应用的名称，后续微应用通过此名称进行识别name: 'serviceIntegrate',// 微应用的入口entry: 'https://ruianinfoscreen.ruijianai.com',// 微应用加载的容器，与上面的id需保持完全一致container: '#integrate-container',// 激活微应用的规则（路由），需要与路由文件的路径保持一致，同时需要与子应用嵌入页面的路由保持一致activeRule: '/service-integrate',// 向子应用传递参数props: {data: ""}},
]);// 启动乾坤
start();
- 路由文件添加该页面的路由
{path: '/service-integrate',name: "serviceIntegrate",component: () => import('../views/Integrate/Index.vue'),},
子应用（react18+umi）工作
- 安装@umijs/plugin-qiankun依赖
yarn add @umijs/plugin-qiankun 或者 npm i @umijs/plugin-qiankun --save
- umirc.ts中开启qiankun的配置
qiankun: {slave: {},
},
// 开启全局初始状态管理，用于乾坤初始化接受参数时使用
initialState: {},
- package.json中添加name字段
{"name": "service-integrate",
}
- 在app.tsx中接收参数
let globalData: any
export const qiankun = {// 应用加载之前async bootstrap(props: any) {console.log('service-integrate bootstrap', props)},// 应用 render 之前触发async mount(props: any) {console.log('service-integrate mount', props)globalData = cloneDeep(props)},// 应用卸载之后触发async unmount(props: any) {console.log('service-integrate unmount', props)},
}
// 将初始化qiankun接受参数设置为全局初始状态，以便在页面中使用
export async function getInitialState() {// 页面中使用时const { initialState } = useModel('@@initialState')获取return globalData
}
部署到线上后会发现遇到跨域的问题，此时需要配置nginx
需要在子应用的nginx配置中加上下面这个配置，允许所有源都可以访问
set $core_orgin $http_origin;
add_header 'Access-Control-Allow-Origin' $core_orgin;
add_header 'Access-Control-Allow-Credentials' 'true' always;
