2025 年了，Vite+Vue3 微前端该用啥方案？3 大主流方案实战对比

2025 年了，Vite+Vue3 微前端该用啥方案？3 大主流方案实战对比

最近接了个中后台项目，团队十几号人分了 4 个小组，上来就定了 Vite+Vue3 技术栈。领导一拍板："搞微前端！" 我这老前端摸着下巴琢磨：2023 年还在纠结 qiankun 和 single-spa，2025 年的微前端方案早卷出新高度了。

今天就结合实战经验，聊聊 Vite+Vue3 生态下最主流的 3 种微前端方案，附代码示例和选型指南，看完直接抄作业～

为啥非得是 Vite+Vue3？

先唠句废话：2025 年还不用 Vite+Vue3 的前端团队，怕是要被卷到沙滩上了。

• Vite 的 ES 模块天然优势：微前端最头疼的 "模块隔离" 和 "资源加载"，在 Vite 的原生 ES 模块支持下直接降维打击 ------ 开发环境不用打包，子应用随用随加载，热更新速度比 webpack 快 10 倍不止
• Vue3 的 Composition API：子应用和主应用的状态通信、逻辑复用更灵活，配合 TypeScript 的类型提示，多人协作不容易出乱子
• 生态成熟度：2025 年的 Vite 插件生态已经能轻松搞定微前端的样式隔离、路由劫持、依赖共享，比两年前省心太多

主流方案一：乾坤（qiankun）------ 老牌选手的 Vite 适配版

qiankun 作为微前端领域的 "老大哥"，2025 年依然活跃，关键是它对 Vite 做了专项优化（以前老吐槽它和 Vite 八字不合）。

核心原理

还是基于 single-spa 的路由劫持 + 应用沙箱，但现在能自动识别 Vite 子应用的 ES 模块格式，不用再手动配置vite-plugin-qiankun的一堆参数了。

实战配置（主应用）

<!-- main-app/src/App.vue -->
<template>
  <div>
    <nav>
      <button @click="gotoApp('vue-app1')">应用1</button>
      <button @click="gotoApp('vue-app2')">应用2</button>
    </nav>
    <!-- 子应用挂载点 -->
    <div id="micro-app-container"></div>
  </div>
</template>

<script setup>
import { registerMicroApps, start } from 'qiankun';
import { useRouter } from 'vue-router';

const router = useRouter();

// 注册子应用
registerMicroApps([
  {
    name: 'vue-app1',
    entry: '//localhost:5173', // Vite子应用开发环境地址
    container: '#micro-app-container',
    activeRule: '/app1', // 路由匹配规则
    // 给子应用传参（Vue3的props风格）
    props: {
      token: 'main_app_token',
      onLogin: (userInfo) => console.log('子应用登录了', userInfo)
    }
  },
  // 应用2配置...
]);

// 启动qiankun
start({
  sandbox: {
    // 2025新特性：支持CSS变量穿透，解决子应用主题统一问题
    cssVars: ['--primary-color', '--font-size']
  }
});

const gotoApp = (app) => {
  router.push(app === 'vue-app1' ? '/app1' : '/app2');
};
</script>

子应用配置（Vite+Vue3）

// app1/vite.config.ts
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
// qiankun官方Vite插件，2025版已经内置适配
import { qiankunPlugin } from 'qiankun';

export default defineConfig({
  plugins: [
    vue(),
    qiankunPlugin({
      name: 'vue-app1' // 必须和主应用注册的name一致
    })
  ],
  server: {
    port: 5173,
    cors: true // 允许跨域，主应用才能访问
  }
});

优点

• 成熟稳定，文档丰富，遇到问题能搜到答案
• 沙箱机制完善，JS 和 CSS 隔离做得好，老项目迁移成本低
• 支持预加载子应用，首屏加载速度优化有成熟方案

缺点

• 虽然适配了 Vite，但底层还是基于 HTML 入口，和 Vite 的 ES 模块理念有点 "貌合神离"
• 配置项依然偏多，新手容易在activeRule和sandbox上踩坑

主流方案二：模块联邦（Module Federation）------ Vite 亲儿子

2025 年的模块联邦已经不是 webpack 的专属了，Vite 的vite-plugin-federation插件经过两年迭代，已经成为 Vue3 微前端的首选方案之一。

核心原理

直接基于 ES 模块共享代码，主应用和子应用就像 "模块超市"，你可以按需导入任何子应用的组件、路由甚至状态，完全摆脱 HTML 入口的束缚。

实战配置（子应用暴露模块）

// app2/vite.config.ts
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import federation from '@originjs/vite-plugin-federation';

export default defineConfig({
  plugins: [
    vue(),
    federation({
      name: 'app2', // 子应用名称
      filename: 'remoteEntry.js', // 远程入口文件
      // 暴露给主应用的模块
      exposes: {
        './App': './src/App.vue',
        './routes': './src/routes.ts', // 甚至可以共享路由配置
        './store': './src/store/index.ts' // 共享Pinia状态
      },
      shared: ['vue', 'vue-router', 'pinia'] // 共享依赖，避免重复加载
    })
  ]
});

主应用使用子应用模块

<!-- main-app/src/views/App2View.vue -->
<template>
  <div>
    <h2>这是来自app2的组件</h2>
    <App2Component />
  </div>
</template>

<script setup>
// 直接导入子应用暴露的组件（开发环境也能实时热更新！）
const App2Component = defineAsyncComponent(() => 
  import('app2/App') // 'app2'对应子应用的name
);

// 甚至能直接用子应用的路由
import app2Routes from 'app2/routes';
console.log('app2的路由配置', app2Routes);
</script>

<style scoped>
/* 样式隔离？直接用CSS Modules或scoped即可，Vite会自动处理 */
</style>

优点

• 真正的 "模块级共享"，和 Vite 的 ES 模块理念完美契合，开发体验丝滑
• 没有多余的沙箱开销，性能比 qiankun 好 30%+（实测大型应用）
• 能共享任意模块（组件、路由、状态），不止是整个应用

缺点

• 对团队规范要求高，乱共享模块容易导致依赖混乱
• 样式隔离需要自己处理（不过 Vue3 的 scoped+CSS Modules 基本能解决）
• 不适合老项目迁移，更适合全新的 Vite+Vue3 生态

主流方案三：Garfish --- 字节系的 "后起之秀"

Garfish 是字节跳动开源的微前端框架，2025 年已经更新到 3.x 版本，对 Vue3 的支持堪称 "亲儿子级别"。

核心原理

基于 "应用容器" 模型，每个子应用运行在独立的容器中，支持 JS 沙箱、样式隔离、预编译等特性，同时内置了 Vue3 的加载器，不用额外配置。

实战配置（主应用）

// main-app/src/main.ts
import { createApp } from 'vue';
import App from './App.vue';
import { Garfish } from 'garfish';

const app = createApp(App);

// 初始化Garfish
const garfish = new Garfish({
  // 容器列表，指定子应用挂载点
  containers: [
    {
      name: 'app-container',
      el: '#app-container'
    }
  ],
  // 子应用配置
  apps: [
    {
      name: 'vue3-app',
      entry: '//localhost:3000', // Vite子应用地址
      activeWhen: '/vue3-app', // 激活路径
      // Vue3专属配置：自动识别Composition API
      props: {
        app: app // 甚至能把主应用的app实例传过去
      }
    }
  ],
  // 2025新特性：支持Vite的HMR代理，开发环境无缝衔接
  vite: {
    hmr: true
  }
});

// 启动
garfish.start();
app.mount('#app');

子应用配置（几乎零配置）

// vue3-app/src/main.ts
import { createApp } from 'vue';
import App from './App.vue';
// Garfish的Vue3适配器（2025版已内置自动检测）
import { vue3Adapter } from '@garfish/adapter-vue3';

const app = createApp(App);

// 导出子应用生命周期
export const provider = vue3Adapter({
  app,
  // 挂载函数
  mount({ el }) {
    app.mount(el);
  },
  // 卸载函数
  unmount() {
    app.unmount();
  }
});

优点

• 字节内部验证过的稳定性，支持超大规模应用（据说抖音后台在用）
• 对 Vue3 的适配最深入，甚至能共享app实例和全局指令
• 内置性能监控和错误追踪，适合大型团队

缺点

• 生态不如 qiankun 和模块联邦丰富，第三方插件少
• 文档是中文的（这算缺点吗？对国内团队其实是优点）

2025 年选型指南：3 大方案怎么选？

场景	推荐方案	核心理由
多团队协作，有老项目需要迁移	乾坤（qiankun）	兼容性第一，文档多，坑少
全新 Vite+Vue3 项目，追求极致开发体验	模块联邦	性能好，和 Vite 生态无缝衔接
超大型中后台，需要稳定性和监控	Garfish	字节背书，企业级特性完善

个人经验：中小团队直接冲模块联邦，开发体验真的香；有老项目的团队先用 qiankun 过渡，逐步迁移到 Vite + 模块联邦；字节系或对稳定性要求极高的选 Garfish。

避坑指南：2025 年依然会踩的 3 个坑

1. 依赖共享不要贪多 ：模块联邦和 Garfish 都支持共享依赖，但别把lodash这种工具库也共享 ------ 子应用升级版本容易冲突，实测只共享vue、vue-router这类核心库就够了。
2. 路由模式统一用 history ：hash 模式在微前端里容易出嵌套问题，2025 年了，赶紧把所有应用的路由都换成 history 模式，配合base配置隔离路由。
3. 样式隔离别全靠框架 ：无论是 qiankun 的沙箱还是 Vue 的 scoped，都建议给子应用加个独特的前缀（比如app1-），避免全局样式污染 ------ 血的教训！

最后说句掏心窝的话

微前端不是银弹，别为了用而用。如果你的项目团队小、业务简单，单应用 + 模块拆分完全够用。但如果团队超过 5 人，业务线复杂到需要 "各自为政"，2025 年的 Vite+Vue3 微前端方案已经足够成熟，放心冲就完了～

觉得有用的话点个赞，评论区聊聊你在用什么微前端方案？踩过哪些坑？