微前端qiankun接入Vite子应用含Vue3和React18

主应用`basic-vue-app`(vue3+vite)

安装qiankun

npm install qiankun

新建src/qiankun/index.js文件，进行单独的抽离

import { registerMicroApps, start } from 'qiankun'
registerMicroApps([{name: 'vue-app', // 必须与微应用注册名字相同entry: 'http://127.0.0.1:5174', // 入口路径，开发时为微应用所启本地服务，上线时为微应用线上路径container: '#vue-app-container', // 微应用挂载的节点activeRule: '/micro-vue', // 当访问路由为 /micro-vue 时加载微应用props: {msg: "我是来自主应用的值-vue"  // 主应用向微应用传递参数}},{name: 'react-app',entry: 'http://127.0.0.1:5175',container: '#react-app-container',activeRule: '/micro-react',props: {msg: "我是来自主应用的值-react"}}
])
start()

在main.js导入

import "./qiankun"

在App.vue挂载微应用节点

  <div id="vue-app-container" /><div id="react-app-container" />

微应用`micro-vue-app`(vue3+vite)

qiankun目前是不支持vite的，需要借助插件完成
安装vite-plugin-qiankun

npm install vite-plugin-qiankun

修改vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import qiankun from 'vite-plugin-qiankun'export default defineConfig({plugins: [vue(),qiankun('vue-app', { // 微应用名字，与主应用注册的微应用名字保持一致useDevMode: true})],server: {port: '5174'}
})

修改main.js

import { createApp } from 'vue'
import App from './App.vue'
import { store } from './store'import { renderWithQiankun, qiankunWindow } from 'vite-plugin-qiankun/dist/helper'const initQianKun = () => {renderWithQiankun({// 当前应用在主应用中的生命周期// 文档 https://qiankun.umijs.org/zh/guide/getting-started#mount(props) {render(props.container)//  可以通过props读取主应用的参数：msg// 监听主应用传值props.onGlobalStateChange((res) => {store.count = res.count// console.log(res.count)})},bootstrap() { },unmount() { },})
}const render = (container) => {// 如果是在主应用的环境下就挂载主应用的节点，否则挂载到本地const appDom = container ? container : "#app"createApp(App).mount(appDom)
}// 判断当前应用是否在主应用中
qiankunWindow.__POWERED_BY_QIANKUN__ ? initQianKun() : render()

微应用`micro-react-app`(react18+vite)

跟vue配置一样
但是会报这个错误

解决，在vite.config.js删除react()

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import qiankun from 'vite-plugin-qiankun'export default defineConfig({plugins: [// 在开发模式下需要把react()关掉// https://github.com/umijs/qiankun/issues/1257// react(),qiankun('react-app', { // 微应用名字，与主应用注册的微应用名字保持一致useDevMode: true})],server: {port: '5175',}
})

在jsx中进行完整引入

import React from 'react'

main.jsx与vue的一样，就不贴代码了

需要完善的地方

当前，仅仅在开发模式的情况下没问题，还没有上生产环境
微应用没有安装路由，这个等以后项目需要在处理了
react获取主应用的值为啥一直是0，因为是我写死的

代码仓库

https://github.com/skywalk94/qiankun-demo.git

微前端qiankun接入Vite子应用含Vue3和React18相关推荐

qiankun 传统项目配置_微前端 qiankun 项目实践
原标题:微前端 qiankun 项目实践作者:zxh1307 https://juejin.im/post/5ea55417e51d4546e347fda9 导语最近在做微前端的项目 , 过程中真 ...
基于微前端qiankun的多页签缓存方案实践
作者:vivo 互联网前端团队- Tang Xiao 本文梳理了基于阿里开源微前端框架qiankun,实现多页签及子应用缓存的方案,同时还类比了多个不同方案之间的区别及优劣势,为使用微前端进行多页签开 ...
Microapp 接入vite子应用
一.子应用官网教程:https://micro-zoe.github.io/micro-app/docs.html#/zh-cn/framework/vite 1,步骤一:修改vue.config. ...
微前端 - qiankun 应用间通信
前言上篇主要记录了如果使用 qiankun,本文记录下 qiankun 应用间如何通信. 一.如何划分子应用在微前端架构中,我们应该按业务划分出对应的子应用,而不是通过功能模块划分子应用.主要原因 ...
微前端qiankun 问题
微前端qiankun 遇到问题,连接子应用之后报错 We're sorry but micro-front-web3 doesn't work properly without JavaScript ...
微前端qiankun 子应用使用阿里字体图标不显示
微前端打包部署后,子应用的iconfont的字体图标显示报错, 原因:打包后请求字体的路径是获取主应用下面的文件解决方案:将字体图标打包成base64显示 // 打包成base64config.mo ...
py获取前端的参数_微前端 qiankun 项目实践
(给前端大全加星标,提升前端技能) 作者:zxh1307 https://juejin.im/post/5ea55417e51d4546e347fda9 导语最近在做微前端的项目 , 过程中真是踩了 ...
微前端 - qiankun
前言 qiankun 是一个基于 single-spa 的微前端实现库,旨在帮助大家能更简单.无痛的构建一个生产可用微前端架构系统. 本文主要记录下如何接入 qiankun 微前端.主应用使用 vue ...
微前端qiankun从搭建到部署的实践
最近负责的新项目用到了qiankun,写篇文章分享下实战中遇到的一些问题和思考. 示例代码: github.com/fengxianqi/-. 在线demo:qiankun.fengxianqi.co ...

微前端qiankun接入Vite子应用含Vue3和React18

主应用`basic-vue-app`(vue3+vite)

微应用`micro-vue-app`(vue3+vite)

微应用`micro-react-app`(react18+vite)

需要完善的地方

微前端qiankun接入Vite子应用含Vue3和React18相关推荐

最新文章

热门文章

微前端qiankun接入Vite子应用含Vue3和React18

主应用basic-vue-app(vue3+vite)

微应用micro-vue-app(vue3+vite)

微应用micro-react-app(react18+vite)

需要完善的地方

微前端qiankun接入Vite子应用含Vue3和React18相关推荐

最新文章

热门文章

主应用`basic-vue-app`(vue3+vite)

微应用`micro-vue-app`(vue3+vite)

微应用`micro-react-app`(react18+vite)