微前端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;
相关推荐
excel13 分钟前
为什么相同卷积代码在不同层学到的特征完全不同——基于 tfjs-node 猫图像识别示例的逐层解析
前端
知识分享小能手14 分钟前
React学习教程,从入门到精通,React 使用属性(Props)创建组件语法知识点与案例详解(15)
前端·javascript·vue.js·学习·react.js·前端框架·vue
用户214118326360216 分钟前
dify案例分享-免费玩转即梦 4.0 多图生成!Dify 工作流从搭建到使用全攻略,附案例效果
前端
CodeSheep16 分钟前
稚晖君又开始摇人了,有点猛啊!
前端·后端·程序员
JarvanMo19 分钟前
Flutter Web vs Mobile:主要区别以及如何调整你的UI
前端
IT_陈寒38 分钟前
Java性能优化:从这8个关键指标开始,让你的应用提速50%
前端·人工智能·后端
天生我材必有用_吴用40 分钟前
Vue3+Node.js 实现大文件上传:断点续传、秒传、分片上传完整教程(含源码)
前端
摸鱼的春哥1 小时前
前端程序员最讨厌的10件事
前端·javascript·后端
牧羊狼的狼5 小时前
React 中的 HOC 和 Hooks
前端·javascript·react.js·hooks·高阶组件·hoc
知识分享小能手6 小时前
React学习教程,从入门到精通, React 属性(Props)语法知识点与案例详解(14)
前端·javascript·vue.js·学习·react.js·vue·react