Vite实现微前端子应用打包需导出生命周期钩子、配置UMD格式输出及全局变量名，并配合qiankun完成JS/CSS隔离与独立加载。

在 Vite 中实现前端微服务子应用打包，核心是让子应用具备独立构建、可被主应用按需加载的能力，同时避免与主应用或其他子应用的资源冲突（如全局样式、JS 变量污染、路由冲突等）。Vite 本身不内置微前端方案，但可通过配置 + 微前端框架（如 qiankun、Module Federation 或轻量方案）协同完成。

1. 子应用需支持独立运行和作为子模块加载

子应用必须能单独启动调试（vite dev），也能被主应用以 script 标签或动态 import 方式加载。关键在于：

• 导出生命周期钩子（bootstrap、mount、unmount），供 qiankun 等框架调用
• 配置 build.rollupOptions.output，使用 umd 或 iife 格式，并指定 name（如 subAppA），确保挂载到全局变量
• 禁用 HTML 构建（build.rollupOptions.input 指向入口 JS，而非 HTML），避免生成冗余 index.html

2. Vite 配置示例（qiankun 子应用）

在子应用的 vite.config.ts 中：

PigX UI 前端开发

PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。

下载

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

export default defineConfig({
  plugins: [vue()],
  build: {
    target: 'es2015',
    // 打包为 umd 格式，暴露全局变量
    rollupOptions: {
      output: {
        format: 'umd',
        name: 'subAppA', // 必须与主应用注册名一致
        exports: 'named',
        // 确保第三方库不被打包进子应用（由主应用提供）
        external: ['vue', 'vue-router', 'pinia'],
        globals: {
          vue: 'Vue',
          'vue-router': 'VueRouter',
          pinia: 'Pinia'
        }
      },
      input: '/src/main.ts' // 入口为 JS，非 HTML
    }
  },
  // 开发时仍可独立运行
  server: {
    port: 3001,
    open: true
  }
})

3. 主应用中注册子应用（以 qiankun 为例）

主应用使用 qiankun 加载子应用，需确保子应用资源路径正确（如 CSS、JS、静态资源）：

立即学习“Java免费学习笔记（深入）”；

• 子应用打包后，所有资源（JS/CSS/图片）应部署在同一目录下（如 /subapp-a/）
• 子应用 JS 中引用的资源路径需相对化（Vite 默认支持，无需额外配置）
• 主应用注册时指定 entry 为子应用 JS 地址（如 '//localhost:3001/subapp-a.js' 或线上 CDN 路径）

4. 注意样式隔离与状态隔离

Vite 不解决运行时隔离问题，需配合微前端方案处理：

• qiankun 默认启用沙箱（proxy 沙箱或 snapshot 沙箱），隔离 JS 执行环境
• 样式隔离需开启 shadow: true（Shadow DOM）或使用 CSS Modules / scoped CSS / BEM 约定
• 避免在子应用中操作 window、document.body 等全局对象；路由需使用 history 模式并配置 base（如 base: '/subapp-a/'）

注：若采用 Webpack Module Federation，Vite 可通过 @originjs/vite-plugin-federation 插件支持，原理类似，但更侧重模块级共享（如共享 React/Vue 实例），适合技术栈一致的场景。