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

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

安装qiankun

代码语言：javascript复制

npm install qiankun

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

代码语言：javascript复制

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导入

代码语言：javascript复制

import "./qiankun"

在App.vue挂载微应用节点

代码语言：javascript复制

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

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

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

代码语言：javascript复制

npm install vite-plugin-qiankun

修改vite.config.js

代码语言：javascript复制

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

代码语言：javascript复制

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()

代码语言：javascript复制

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中进行完整引入

代码语言：javascript复制

import React from 'react'

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

需要完善的地方

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

代码仓库

代码语言：javascript复制

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

javascript vue.js react

0 人点赞