Vite + Vue3 + Module Federation 打造微前端MVP

本文将手把手带你从 0 到 1 构建一个包含三个独立 Vue3 应用（homeapp、demo1app、demo2app）的微前端架构，基于 Vite + Module Federation 实现组件共享、远程加载，并解决常见的跨域、加载失败等问题。

什么是 Module Federation？

Module Federation 是 Webpack 5 提出的革命性机制，它允许多个独立构建的项目共享模块。简单理解就是：

A 应用可以在运行时动态加载 B 应用暴露的模块，就像加载本地组件一样。

这为微前端架构提供了现代化解决方案------多个团队可并行开发和部署独立模块，互不干扰又可自由组合。

那 Vite 支持 Module Federation 吗？

虽然原生 Vite 不支持 Webpack 的 Module Federation，但社区有非常成熟的插件：

@originjs/vite-plugin-federation

它让我们在 Vite 中像在 Webpack 一样使用 Module Federation，并支持 Vue、React 等生态。

项目结构简介

我们将构建三个独立应用：

ruby 复制代码

vite-module-federation-demo/
├── homeapp      # 暴露 ListComp 组件
├── demo1app     # 远程加载 homeapp 中的组件
└── demo2app     # 加载整个 demo1app，形成应用组合

快速上手三步走

Step 1：安装插件

在每个项目中执行：

bash 复制代码

pnpm add @originjs/vite-plugin-federation -D
pnpm add vue @vitejs/plugin-vue -D

Step 2：配置 `vite.config.ts`

以 homeapp 为例：

ts 复制代码

// homeapp/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: 'homeapp',
      filename: 'remoteEntry.js',
      exposes: {
        './ListComp': './src/components/ListComp.vue'
      },
      shared: ['vue']
    })
  ],
  build: {
    target: 'esnext',
    minify: false
  }
})

在 demo1app 中使用 homeapp的 ListComp，同时暴露 demo1app：

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: 'demo1app',
      filename: 'remoteEntry.js',
      remotes: {
        homeapp: 'http://localhost:5001/assets/remoteEntry.js'
      },
      exposes: {
        './App': './src/App.vue' // demo1app 整个应用对外暴露
      },
      shared: ['vue']
    })
  ],
  build: {
    target: 'esnext',
    minify: false
  }
})

🧠 小提示：路径不要手写错 "remoteEntry.js"，最好确认 URL 是否能访问！

在 demo2app 中使用 demo1app：

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: 'demo2app',
      remotes: {
        demo1app: 'http://localhost:5002/assets/remoteEntry.js'
      },
      shared: ['vue']
    })
  ],
  build: {
    target: 'esnext',
    minify: false
  }
})

Step 3：打包远程模块 + 本地开发主应用

bash 复制代码

cd homeapp
vite build
http-server dist -p 5001 --cors  # 支持 CORS

cd demo1app
vite build
http-server dist -p 5002 --cors

cd demo2app
http-server dist -p 5003 --cors

如何在主应用中使用远程组件？

在 demo1app 中引入 homeapp 的组件：

ts 复制代码

// demo1app/src/App.vue
import { defineAsyncComponent } from 'vue'

const ListComp = defineAsyncComponent(() => import('homeapp/ListComp'))

export default {
  components: { ListComp }
}

常见错误与解决方案

错误提示	解决方案
❌`404: remoteEntry.js not found`	必须 `vite build` 后才能生成 remoteEntry.js
❌`Access to script blocked by CORS`	使用 `http-server --cors` 或配置 Nginx 添加 CORS 响应头
❌`Failed to fetch dynamically imported module`	检查远程地址是否可访问、是否 build、路径是否对
❌ 加载组件无响应	记得用 `defineAsyncComponent` 包裹远程组件

最终效果

结语

Vite + Vue3 + Module Federation 是构建现代微前端应用的强组合，它同时兼顾了：

极速开发体验（Vite）
灵活运行时模块组合（MF）
解耦部署与升级（微前端核心价值）

如果你也在做中大型前端系统拆分、模块重用、独立部署的工作，Module Federation 将是你不可错过的关键技术。

GitHub地址 ：github.com/Tom-kkk/vit...

Vite + Vue3 + Module Federation 打造微前端MVP