qiankun插件vite-plugin-qiankun的使用

因为目前qinakun插件不支持vite,所以要使用插件vite-plugin-qiankun,

在vue中引入

npm install vite-plugin-qiankun

在vite.config.ts中引入

import qiankun from 'vite-plugin-qiankun'

export default defineConfig({
  plugins: [
    qiankun('xxxx', { // 微应用名字，与主应用注册的微应用名字保持一致
      useDevMode: true,
    }),
  ],
});

在main.ts中引入

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

const render = async (props: QiankunProps = {}) => {
  const { container } = props
  // const app: string | Element = container?.querySelector('#app') || '#app' // 避免 id 重复导致微应用挂载失败
  const app = createApp(App)

  app.use(router)

  app.use(store)

  app.mount(container?.querySelector('#app') || '#app')
}

const initQianKun = () => {
  renderWithQiankun({
    bootstrap() {
      console.log('微应用：bootstrap')
    },
    mount(props) {
      // 获取主应用传入数据
      console.log('微应用：mount', props)
      render(props)
    },
    unmount(props) {
      console.log('微应用：unmount', props)
    },
    update(props) {
      console.log('微应用：update', props)
    },
  })
}

qiankunWindow.__POWERED_BY_QIANKUN__ ? initQianKun() : render() // 判断是否使用 qiankun ，保证项目可以独立运行

关键配置路由,一定配置主应用的全部路径要不会404

import { qiankunWindow } from 'vite-plugin-qiankun/dist/helper'
// 创建路由实例
const base = qiankunWindow.__POWERED_BY_QIANKUN__ ? '/xxx' : '/' //主应用的项目路径

const router = createRouter({
  history: createWebHistory(base), // createWebHashHistory URL带#，createWebHistory URL不带#
  strict: true,
  routes: remainingRouter as RouteRecordRaw[],
  scrollBehavior: () => ({ left: 0, top: 0 })
})