微前端qiankun接入Vue和React项目

业务场景:主应用vue,子应用react18+umi,使用乾坤嵌入子应用页面(子应用目前只有一个页面)

主应用(vue)工作

  1. 首先,在主应用vue中安装qiankun依赖
bash 复制代码
yarn add qiankun 或者 npm i qiankun --save
  1. 创建需要嵌入子应用的页面或者组件
bash 复制代码
<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. 在main.js注册qiankun
javascript 复制代码
// 微应用的注册信息
import { registerMicroApps, start } from 'qiankun';
registerMicroApps([
  {
    // 微应用的名称,后续微应用通过此名称进行识别
    name: 'serviceIntegrate',
    // 微应用的入口
    entry: 'https://ruianinfoscreen.ruijianai.com',
    // 微应用加载的容器,与上面的id需保持完全一致
    container: '#integrate-container',
    // 激活微应用的规则(路由),需要与路由文件的路径保持一致,同时需要与子应用嵌入页面的路由保持一致
    activeRule: '/service-integrate',
    // 向子应用传递参数
    props: {
      data: ""
    }
  },
]);

// 启动乾坤
start();
  1. 路由文件添加该页面的路由
bash 复制代码
 {
   path: '/service-integrate',
   name: "serviceIntegrate",
   component: () => import('../views/Integrate/Index.vue'),
 },

子应用(react18+umi)工作

  1. 安装@umijs/plugin-qiankun依赖
bash 复制代码
yarn add @umijs/plugin-qiankun 或者 npm i @umijs/plugin-qiankun --save
  1. umirc.ts中开启qiankun的配置
javascript 复制代码
qiankun: {
  slave: {},
},
// 开启全局初始状态管理,用于乾坤初始化接受参数时使用
initialState: {},
  1. package.json中添加name字段
bash 复制代码
{
  "name": "service-integrate",
}
  1. 在app.tsx中接收参数
javascript 复制代码
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配置中加上下面这个配置,允许所有源都可以访问

bash 复制代码
set $core_orgin $http_origin;
add_header 'Access-Control-Allow-Origin' $core_orgin;
add_header 'Access-Control-Allow-Credentials' 'true' always;
相关推荐
OEC小胖胖4 小时前
去中心化身份:2025年Web3身份验证系统开发实践
前端·web3·去中心化·区块链
vvilkim5 小时前
Electron 进程间通信(IPC)深度优化指南
前端·javascript·electron
ai小鬼头7 小时前
百度秒搭发布:无代码编程如何让普通人轻松打造AI应用?
前端·后端·github
漂流瓶jz7 小时前
清除浮动/避开margin折叠:前端CSS中BFC的特点与限制
前端·css·面试
前端 贾公子7 小时前
在移动端使用 Tailwind CSS (uniapp)
前端·uni-app
散步去海边7 小时前
Cursor 进阶使用教程
前端·ai编程·cursor
清幽竹客7 小时前
vue-30(理解 Nuxt.js 目录结构)
前端·javascript·vue.js
weiweiweb8887 小时前
cesium加载Draco几何压缩数据
前端·javascript·vue.js
幼儿园技术家7 小时前
微信小店与微信小程序简单集成指南
前端
我不吃饼干9 天前
鸽了六年的某大厂面试题:你会手写一个模板引擎吗?
前端·javascript·面试