今天自己动手搭建 qiankun 微前端，主应用和微应用都是采用 vite2+vue3。照着官网一顿操作，整了 2 个小时始终跑不起来。查了下资料，原来 qiankun 暂时不支持 vite 应用，vite 应用无法获取到生命周期。

导致原因

呵呵，半桶水水平，哪里看的懂原因。直接上解决方案吧。

解决方案

亲测有效的方式是使用 vite-plugin-qiankun 插件来解决。

插件介绍

vite-plugin-qiankun: 帮助应用快速接入乾坤的 vite 插件。

• 保留 vite 构建 es 模块的优势

• 一键配置，不影响已有的 vite 配置

• 支持 vite 开发环境

安装插件

npm install vite-plugin-qiankun

vite.config.ts 示例

import { ConfigEnv, UserConfig, loadEnv } from 'vite';
import { viteMockServe } from 'vite-plugin-mock';
import createVuePlugin from '@vitejs/plugin-vue';
import vueJsx from '@vitejs/plugin-vue-jsx';
import svgLoader from 'vite-svg-loader';
import qiankun from 'vite-plugin-qiankun';

import path from 'path';

const CWD = process.cwd();

// https://vitejs.dev/config/
export default ({ mode }: ConfigEnv): UserConfig => {
  const { VITE_BASE_URL } = loadEnv(mode, CWD);
  return {
    base: VITE_BASE_URL,
    resolve: {
      alias: {
        '@': path.resolve(__dirname, './src'),
      },
    },

    plugins: [
      createVuePlugin(),
      vueJsx(),
      viteMockServe({
        mockPath: 'mock',
        localEnabled: true,
      }),
      svgLoader(),
      qiankun('moudule-a',{
        useDevMode: true
      })
    ],

    server: {
      port: 9001,
      host: '0.0.0.0',
      proxy: {
        '/api': 'http://127.0.0.1:3000/',
      },
    },
  };
};

main.ts 示例

import './public-path'
import { createApp } from 'vue';

import TDesign from 'tdesign-vue-next';
import 'tdesign-vue-next/es/style/index.css';

import { store } from './store';
import router from './router';
import '@/style/index.less';
import './permission';
import App from './App.vue';
import { renderWithQiankun, qiankunWindow } from 'vite-plugin-qiankun/dist/helper';


//let router = null;
// eslint-disable-next-line no-unused-vars
let instance = null;

// @ts-nocheck
renderWithQiankun({
    mount(props) {
        render(props);
        instance.config.globalProperties.$onGlobalStateChange = props.onGlobalStateChange;
        instance.config.globalProperties.$setGlobalState = props.setGlobalState;
    },
    bootstrap() {
        console.log("%c ", "color: green;", "sub-vite2-vue3 app bootstraped");
    },
    unmount(props: any) {
        instance.unmount();
        instance._container.innerHTML = "";
        instance = null;
    },
    update(){

    }
});

// @ts-nocheck
// eslint-disable-next-line no-unused-vars
function render(props = {}) {
    const { container } = props;
    instance = createApp(App);
    instance.use(TDesign)
    instance.use(store)
    instance.use(router)
    instance.mount(container ? container.querySelector("#app") : "#app");
}

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

//const app = createApp(App);

//app.use(TDesign);
//app.use(store);
//app.use(router);

//app.mount('#app');

参考资料

qiankun
vite-plugin-qiankun
vite2 接入 qiankun 微前端