qiankun+vite+vue3

基座与子应用代码示例

本示例中，基座为Vue3，子应用也是Vue3，由于qiankun不支持Vite构建的项目，这里还要引入

vite-plugin-qiankun 插件

基座（主应用）

加载qiankun依赖 

 npm i qiankun -S

qiankun配置（src/qiankun）

src/qiankun/config.ts

export default {
  subApps: [
    {
      name: 'sub-app', // 子应用名称，跟package.json一致
      entry: 'http://localhost:3001/sub-app/', // 子应用入口，本地环境下指定端口
      container: '#sub-container', // 挂载子应用的dom
      activeRule: '/sub-app', // 路由匹配规则
      props: {} // 主应用与子应用通信传值
    },
  ]
}

 src/qiankun/index.ts

import { registerMicroApps, start } from 'qiankun'
import config from './config'

const { subApps } = config

// 注册子应用
export function registerApps() {
  try {
    registerMicroApps(subApps, {
      beforeLoad: [
        async app => {
          console.log('before load', app)
        }
      ],
      beforeMount: [
        async app => {
          console.log('before mount', app)
        }
      ],
      afterUnmount: [
        async app => {
          console.log('before unmount', app)
        }
      ]
    })
  } catch (err) {
    console.log(err)
  }
}

export function qiankunStart() {
  registerApps()
  // 启动微服务
  start()
}

src/views/sub-app/index.vue

<template>
  <div id="sub-container" class="sub-app-wrap"></div>
</template>

<script setup lang="ts">
import { qiankunStart } from '@/qiankun'
import { onMounted } from 'vue'

onMounted(() => {
  qiankunStart()
})
</script>

<style lang="scss" scoped>
</style>

App.vue

<script setup lang="ts">
import { RouterLink, RouterView } from 'vue-router'
import HelloWorld from './components/HelloWorld.vue'
</script>

<template>
  <header>
    <img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />

    <div class="wrapper">
      <HelloWorld msg="You did it!" />

      <nav>
        <RouterLink to="/">Home</RouterLink>
        <RouterLink to="/about">About</RouterLink>
        <RouterLink to="/sub-app">Sub</RouterLink>
      </nav>
    </div>
  </header>

  <RouterView />

</template>

<style scoped>
header {
  line-height: 1.5;
  max-height: 100vh;
}

.logo {
  display: block;
  margin: 0 auto 2rem;
}

nav {
  width: 100%;
  font-size: 12px;
  text-align: center;
  margin-top: 2rem;
}

nav a.router-link-exact-active {
  color: var(--color-text);
}

nav a.router-link-exact-active:hover {
  background-color: transparent;
}

nav a {
  display: inline-block;
  padding: 0 1rem;
  border-left: 1px solid var(--color-border);
}

nav a:first-of-type {
  border: 0;
}

@media (min-width: 1024px) {
  header {
    display: flex;
    place-items: center;
    padding-right: calc(var(--section-gap) / 2);
  }

  .logo {
    margin: 0 2rem 0 0;
  }

  header .wrapper {
    display: flex;
    place-items: flex-start;
    flex-wrap: wrap;
  }

  nav {
    text-align: left;
    margin-left: -1rem;
    font-size: 1rem;

    padding: 1rem 0;
    margin-top: 1rem;
  }
}
</style>

 src/router/index.ts

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

const router = createRouter({
  history: createWebHistory(import.meta.env.VITE_APP_BASE),
  routes: [
    {
      path: '/',
      name: 'home',
      component: () => import('../views/HomeView.vue'),
    },
    {
      path: '/about',
      name: 'about',
      component: () => import('../views/AboutView.vue'),
    },
    // 匹配子应用路由
    {
      path: '/sub-app',
      name: 'subApp',
      component: () => import('../views/sub-app.vue'),
      children: [
        { path: '/:pathMatch(.*)*', component: () => import('../views/sub-app.vue') },
      ]
    },
  ],
})

export default router

 main.ts

import './assets/main.css'

import { createApp } from 'vue'
import { createPinia } from 'pinia'

import App from './App.vue'
import router from './router'

import { qiankunStart } from './qiankun/index'

const app = createApp(App)

app.use(createPinia())
app.use(router)

app.mount('#app')

子应用

加载vite-plugin-qiankun依赖

npm i vite-plugin-qiankun

vite.config.ts

import { fileURLToPath, URL } from 'node:url'

import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import qiankun from 'vite-plugin-qiankun'

export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd());

  return {
    base: '/sub-app', // 必须与基座中配置的activeRule一致
    server: {
      host: '0.0.0.0',
      port: 3001,
      open: true,
      cors: true,
      origin: 'http://localhost:3001',
      // headers: {
      //   'Access-Control-Allow-Origin': '*'
      // }
    },
    plugins: [
      vue(),
      qiankun(
        'sub-app', // 是子应用名，主应用注册时AppName需保持一致
        {
          useDevMode: true
        })
    ],
    resolve: {
      alias: {
        '@': fileURLToPath(new URL('./src', import.meta.url))
      },
    },
  }
})

 main.ts

import './assets/main.css'

import { createApp } from 'vue'
import { createPinia } from 'pinia'

import App from './App.vue'
import router from './router'

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

let app;

if (!qiankunWindow.__POWERED_BY_QIANKUN__) {
  // 非 qiankun 模式
  app = createApp(App)
  app.use(createPinia()).use(router).mount('#app')
} else {
  // qiankun 模式
  renderWithQiankun({
    mount(props) {
      console.log('mount-props', props);
      app = createApp(App)
      app.use(router).mount(props.container?.querySelector('#app'))
    },
    bootstrap() {
      console.log('bootstrap');
    },
    update() {
      console.log('update');
    },
    unmount(props: any) {
      app?.unmount();
    },
  })
}