微前端qiankun接入Vue和React项目

最新推荐文章于 2024-04-23 17:20:53 发布

a小毛同学

最新推荐文章于 2024-04-23 17:20:53 发布

阅读量872

点赞数 5

文章标签：微服务前端

本文链接：https://blog.csdn.net/mao871863224/article/details/137238840

版权

本文详细描述了如何在主应用Vue中嵌入子应用React18+umi，包括在Vue中安装和配置Qiankun，子应用的React项目设置，以及处理跨域问题的Nginx配置。

摘要由CSDN通过智能技术生成

业务场景：主应用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;