微前端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;
相关推荐
又是忙碌的一天16 小时前
前端学习 JavaScript
前端·javascript·学习
Jagger_16 小时前
Cursor + Apifox MCP:告别手动复制接口,AI 助你高效完成接口文档开发
前端
IT_陈寒16 小时前
Redis性能优化:5个被低估的配置项让你的QPS提升50%
前端·人工智能·后端
Hilaku16 小时前
重新思考CSS Reset:normalize.css vs reset.css vs remedy.css,在2025年该如何选?
前端·css·代码规范
袁煦丞17 小时前
一图看懂Docker管理 Portainer:cpoar内网穿透实验室第652个成功挑战
前端·程序员·远程工作
右子17 小时前
微信小程序开发“闭坑”指南
前端·javascript·微信小程序
入秋17 小时前
Three.js后期处理实战:噪点 景深 以及色彩调整
前端·javascript·three.js
Asort17 小时前
JavaScript设计模式(七)——桥接模式:解耦抽象与实现的优雅之道
前端·javascript·设计模式
golang学习记17 小时前
从0死磕全栈之Next.js 应用中的认证与授权:从零实现安全用户系统
前端
苏打水com18 小时前
携程前端业务:在线旅游生态下的「复杂行程交互」与「高并发预订」实践
前端·状态模式·旅游