vue3 vite 接入 qiankuan 微前端

原文链接：vite2 接入 qiankun 微前端 - 会写代码的赖先生 - 博客园 (cnblogs.com)

子应用使用vite 应用一直无法获取生命周期， 才知道 qiankun 暂时不支持 vite 应用 ，

推荐使用vite-plugin-qiankun插件来解决，

github地址：
tengmaoqing/vite-plugin-qiankun: 保留vite es特性，快速接入乾坤微前端子应用 (github.com)

优点

• 保留 vite 构建 es 模块的优势
• 一键配置，不影响已有的 vite 配置
• 支持 vite 开发环境

安装插件 

pnpm add vite-plugin-qiankun

 配置 vite.config.js

// vue3
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import qiankun from 'vite-plugin-qiankun';
import { resolve  } from 'path';
export default ({ mode }) => {
  const __DEV__ = mode === 'development'
  return defineConfig({
    alias: {
      '@': resolve('src'),
    },  
    plugins: [ vue(),
      qiankun('sub-vite2-vue3', {
        useDevMode: true
    })],
  })
}

 main.js 中设置导出相应的生命周期

// vue3 main.ts  无关代码自行省略
// @ts-nocheck
import { createApp } from "vue";
import { createRouter, createWebHistory } from "vue-router";
import App from "./App.vue";
import routes from "./router";
import { renderWithQiankun, qiankunWindow } from 'vite-plugin-qiankun/dist/helper';

let router = null;
let instance = null;

renderWithQiankun({
  mount(props) {
   console.log( "qiankun-mount", props);
  },
  bootstrap() {
    console.log("%c ", "color: green;", "sub-vite2-vue3 app bootstraped");
  },
  unmount(props: any) {
    console.log( "qiankun-unmount");
  },
});

参考资源：

1. https://github.com/umijs/qiankun/issues/1257
2. https://github.com/tengmaoqing/vite-plugin-qiankun