微前端qiankun接入Vue和React项目

业务场景：主应用vue，子应用react18+umi，使用乾坤嵌入子应用页面（子应用目前只有一个页面）

主应用（vue）工作

1. 首先，在主应用vue中安装qiankun依赖

yarn add qiankun 或者 npm i qiankun --save
1

2. 创建需要嵌入子应用的页面或者组件

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

3. 在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();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

4. 路由文件添加该页面的路由

 {
   path: '/service-integrate',
   name: "serviceIntegrate",
   component: () => import('../views/Integrate/Index.vue'),
 },
1
2
3
4
5

子应用（react18+umi）工作

1. 安装@umijs/plugin-qiankun依赖

yarn add @umijs/plugin-qiankun 或者 npm i @umijs/plugin-qiankun --save
1

2. umirc.ts中开启qiankun的配置

qiankun: {
  slave: {},
},
// 开启全局初始状态管理，用于乾坤初始化接受参数时使用
initialState: {},
1
2
3
4
5

3. package.json中添加name字段

{
  "name": "service-integrate",
}
1
2
3

4. 在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
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

部署到线上后会发现遇到跨域的问题，此时需要配置nginx

需要在子应用的nginx配置中加上下面这个配置，允许所有源都可以访问

set $core_orgin $http_origin;
add_header 'Access-Control-Allow-Origin' $core_orgin;
add_header 'Access-Control-Allow-Credentials' 'true' always;
1
2
3