vue3+vite作为子应用集成qiankun

vite的集成需要借用第三方插件 vite-plugin-qiankun

1. 安装插件

npm install vite-plugin-qiankun --save

2. vite.config.ts文件配置

 

3. main.ts文件配置

import { createApp } from 'vue'
import '@/assets/styles/reset.scss'
import '@/assets/styles/common.scss'
import '@/assets/styles/theme.scss'
import App from './App.vue'
import routes from './router'
import ElementPlus from "element-plus";
import locale from "element-plus/lib/locale/lang/zh-cn";
import 'element-plus/dist/index.css'
import { createRouter, createWebHashHistory, Router, RouterHistory } from 'vue-router'
import { renderWithQiankun, qiankunWindow } from 'vite-plugin-qiankun/dist/helper'

let router: any = null
let instance: any = null
let history: RouterHistory

declare global {
  interface Window {
    __POWERED_BY_QIANKUN__: any
    __INJECTED_PUBLIC_PATH_BY_QIANKUN__: any
  }
}

function render(props: any = {}) {
  const { container } = props
  
  instance = createApp(App)

  // 将props挂载到全局上，用于主子应用的交互
  instance.config.globalProperties.$sonProps = props

  history = createWebHashHistory(
    qiankunWindow.__POWERED_BY_QIANKUN__ ? '/' : '/'
  )
  
  // 注册ElementPlus
  instance.use(ElementPlus, {
    locale
  });

  // 注册路由
  router = createRouter({
    history,
    routes
  })
  instance.use(router)

  instance.mount(container ? container.querySelector("#app") : "#app");

  if (qiankunWindow.__POWERED_BY_QIANKUN__) {
    console.log('我正在作为子应用运行。。。')
  }
}

renderWithQiankun({
  mount(props: any) {
    render(props);
  },
  bootstrap() {
  },
  update() {
  },
  unmount(props: any) {
    instance.unmount();
    instance._container.innerHTML = "";
    instance = null;
    history.destroy() // 不卸载router会导致其他应用路由失败
    router = null
  }
});

if (!qiankunWindow.__POWERED_BY_QIANKUN__) {
  render({})
}

4. 因为在main.ts中添加了下面的代码

因此官网上的public-path.js可无需添加