vue3 vite 接入 qiankuan 微前端

时间：2025-03-05 13:55:24

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

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

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

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

优点

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

安装插件 

pnpm add vite-plugin-qiankun

 配置 

// 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
    })],
  })
}

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

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

let router = null;
let instance = null;

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

参考资源：

  1. /umijs/qiankun/issues/1257
  2. /tengmaoqing/vite-plugin-qiankun

相关文章