vue3+qiankun+vite搭建微前端服务

因业务需要搭建一套微前端服务, 阅读文档时发现qiankun与vite无法一起使用,需要引入额外插件才可以一起使用,在这里记录下

qiankun基座配置

1.修改index.html中div的id,并在main.js中修改挂在函数

//index.html
<div id="qiankunBaseApp"></div>
//main.js
createApp(App)
  .mount('#qiankunBaseApp')

2.main.js启动qiankun

import {
    registerMicroApps, start } from 'qiankun';
const apps = [
  {
   
    name: 'qiankunPiggy',
    entry: '//localhost:5392',
    fetch,
    container: '#qiankunPiggy',
    activeRule: '/qiankun-piggy',
  }
]
registerMicroApps(apps);
start({
   
  prefetch: false // 取消预加载
});

3.在相应位置设置子应用挂载div

<router-view></router-view>
<div id="qiankunPiggy"></div>

4.接受子应用路由信息并注册
这里我自己写的可能有问题,暂时还没有发现

//main.js
import actions from '../../utils/qiankunUtil/actions'
const router = useRouter()
//将子应用路由加入基座路由中
actions.onGlobalStateChange((state, prevState) => {
   
  if (state.