vue3 + qiankun(微前端)

主服务

路由配置

const router = createRouter({
　　history: createWebHistory(),
　　routes:[
　　{
     path: `/jupiter:page*`,
     name: `jupiter`,
     component: () => import('@/views/child-app/jupiter/index.vue'),
     meta: { title: '子服务', childApp: true },
　　},
 　　// ...
　　]
})
export default router

path: /jupiter:page*，意为当url为/jupiter就会激发子服务的组件，剩下的事情就在此组件中完成

组件（@/views/child-app/jupiter/index.vue)

<template>
  <div ref="childAppRef" class="sub-app-container" />
</template>

<script setup lang="ts">
import { loadMicroApp } from 'qiankun'
import options from '@/microApp/options/index'

const nameKey = 'jupiter'
const childAppRef = ref()
onMounted(() => {
  const { url, appName } = options[nameKey]
  loadMicroApp({
    name: appName,
    entry: `${url}/${appName}`,
    container: childAppRef.value,
  })
})
</script>
<style scoped lang="scss"></style>  

子服务

main.js

因为qiankun还未出官方的方法，这里需要借助第三方插件vite-plugin-qiankun此样例版本为"^1.0.15"

import {
  qiankunWindow, // 这个变量可以判断出是否在主服务中运行
  renderWithQiankun,
} from 'vite-plugin-qiankun/dist/helper'

function render(props?: any) {
  const elementName = 'venus-fara'
  const instance = createApp(App)
  instance.use(router)
  // instance.use(...)
  instance.mount(
    (props?.container
      ? props.container.querySelector(`#${elementName}`)
      : document.getElementById(elementName)) as Element
  )
  return instance
}


if (!qiankunWindow.__POWERED_BY_QIANKUN__) { // 独立运行
  render()
} else { // 在主服务中运行
  renderWithQiankun({
    mount(props) {
      console.log('venusAPP--mount')
      render(props)
    },
    bootstrap() {
      console.log('venusAPP--bootstrap')
    },
    update() {
      console.log('venusAPP--update')
    },
    unmount() {
      console.log('venusAPP--unmount')
      // instance?.unmount()
    },
  })
}

路由配置

const router = createRouter({
  history: createWebHashHistory(),
  routes:[{}...],
})
export default router

routes正常的配置就可以了

vite配置

import qiankun from 'vite-plugin-qiankun'
export default ({ mode }: any) => {
  const env = loadEnv(mode, process.cwd())
  return defineConfig({
    base: `${env.VITE_BASE_CHILD_URL}${env.VITE_BASE_BUILD_DIR}/`, // TODO: 这行也重要，这样此项目静态资源就不会加载出问题了
    qiankun('venus', {
    	useDevMode: true,
    }),
    // ...
  })