微前端-qiankun：vue3-vite 接入 vue3-vite

ゝ一纸荒年。 2024-03-25 15:25 58阅读 0赞

**一、背景**

**主应用：vue3、vite**

[主项目接入qiankun][qiankun]

**子应用：vue3、webpack**

**二、代码-接入子应用**

2.1、安装vite-plugin-qiankun（qiankun官方不支持vite）需要安装插件

> pnpm add vite-plugin-qiankun

2.2、vite.config.ts

import { fileURLToPath, URL } from 'node:url'
    import { defineConfig } from 'vite'
    import vue from '@vitejs/plugin-vue'
    import vueJsx from '@vitejs/plugin-vue-jsx'
    import qiankun from 'vite-plugin-qiankun'
    // https://vitejs.dev/config/
    export default defineConfig({
      plugins: [
        vue(), vueJsx(),
        qiankun('vue3', {
          useDevMode: true
        })
      ],
      server:{
        headers: {
          'Access-Control-Allow-Origin': '*', // 主应用获取子应用时跨域响应头
        },
      },
      resolve: {
        alias: {
          '@': fileURLToPath(new URL('./src', import.meta.url))
        }
      }
    })

2.3、main.ts

import { createApp } from 'vue'
    import { createPinia } from 'pinia'
    import { renderWithQiankun, qiankunWindow, QiankunProps } from 'vite-plugin-qiankun/dist/helper'
    import App from './App.vue'
    import router from './router'
    import './assets/main.css'
    
    const app = createApp(App)
    
    app.use(createPinia())
    app.use(router)
    
    // app.mount('#app')
    // renderWithQiankun： 为子应用导出一些生命周期函数 供主应用在特殊的时机调用
    // qiankunWindow： qiankunWindow.POWERED_BY_QIANKUN 可判断是否在qiankun环境下
    const initQianKun = () => {
        renderWithQiankun({
            // bootstrap 只会在微应用初始化的时候调用一次，下次微应用重新进入时会直接调用 mount 钩子，不会再重复触发 bootstrap
            // 通常我们可以在这里做一些全局变量的初始化，比如不会在 unmount 阶段被销毁的应用级别的缓存等
            bootstrap() {
                console.log('bootstrap');
            },
            // 应用每次进入都会调用 mount 方法，通常我们在这里触发应用的渲染方法，也可以接受主应用传来的参数
            mount(_props: any) {
                console.log('mount', _props);
                render(_props.container)
            },
            // 应用每次 切出/卸载 会调用的unmount方法，通常在这里我们会卸载微应用的应用实例
            unmount(_props: any) {
                console.log('unmount', _props);
            },
            update: function (props: QiankunProps): void | Promise<void> {
                console.log('update');
            }
        });
    }
    
    const render = (container) => {
        // 如果是在主应用的环境下就挂载主应用的节点，否则挂载到本地
        const appDom = container ? container : "#app"
        app.mount(appDom)
    }
    // 判断是否为乾坤环境，否则会报错iqiankun]: Target container with #subAppContainerVue3 not existed while subAppVue3 mounting!
    qiankunWindow.__POWERED_BY_QIANKUN__ ? initQianKun() : render(null)

2.4、访问微前端应用，访问成功。

![1d99cf53072446d1ba84e40f86c3c845.png][]

**三、欢迎交流指正，关注我，一起学习。**

[qiankun]: https://blog.csdn.net/snowball_li/article/details/125432769
[1d99cf53072446d1ba84e40f86c3c845.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/322d2a4294bf4e20beaada77a2a70788.png