qiankun/Vue3子应用

背景

Vue2于2023年12月起停止维护，Vue3是当前的趋势，但Vue3较Vue2有较大的改动（语法、构建工具等），现有Vue2项目升Vue3的改造成本待调研，现在先调研下如需新增系统，使用Vue3的兼容性，即基于当前qiankun微前端架构，调研Vue3+vite子应用内嵌的可行性

前提

1、主应用：依然沿用之前Vue2搭建的主应用
2、子应用：Vue3+vite

直接使用qiankun改造的问题

无法正确加载子应用，这个主要和vite构建方式有关

子应用改造（通过vite-plugin-qiankun插件改造）

1、安装

npm i vite-plugin-qiankun --save

2、vite.config.ts 改造

// 引入
import qiankun from 'vite-plugin-qiankun'

export default defineConfig({
  plugins: [
    // 添加如下代码，“subApp”与主应用中注册的名称一致
    qiankun('subApp', { useDevMode: true })
  ]
})

3、main.ts

// 引入
import {
   renderWithQiankun,
   qiankunWindow,
   QiankunProps,
 } from 'vite-plugin-qiankun/dist/helper'

let instance = null;
function render(props = {}) {
  if (instance) return;
  const { container } = props;
  instance = createApp(App)
   instance.use(createPinia())
   instance.use(router)

  // “subapp” 与 index.html中的id保持一致
  // 脚手架搭建的项目index.html中的id名称一般都是"app"，与主应用相同，会造成子应用加载时找不到正确的容器，需要更改为其它名称
   instance.mount(container ? container.querySelector("#subapp") : "#subapp");
}

const initQianKun = () => {
   renderWithQiankun({
     bootstrap() {
       console.log('微应用：bootstrap')
     },
     mount(props) {
       console.log('微应用：mount', props)
       render(props)
     },
     unmount(props) {
      console.log('微应用：unmount', props)
      instance = null
     },
     update(props) {
       console.log('微应用：update', props)
     },
   })
 }

 qiankunWindow.__POWERED_BY_QIANKUN__ ? initQianKun() : render()

4、router

import { createRouter, createWebHistory } from 'vue-router'

import { qiankunWindow } from 'vite-plugin-qiankun/dist/helper.js'

const router = createRouter({
  // “subDemo” 与 主应用注册时的activeRule保持一致
  history: createWebHistory(qiankunWindow.__POWERED_BY_QIANKUN__ ? "/subDemo" : "/"), // history模式
  routes: [
    {
      path: '/',
      name: 'home',
      component: () => import('../views/HomeView.vue')
    },
    {
      path: '/person',
      name: 'person',
      component: () => import('../views/person/index.vue')
    },
  ]
})

export default router