Vue Academy · 课时

Vite Federation 插件

Q: 「Vite Federation 插件」这节课中我会学到什么？

@originjs/vite-plugin-federation、生产者/消费者配置，以及动态导入远程模块 你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

@originjs/vite-plugin-federation、生产者/消费者配置，以及动态导入远程模块

Vite Federation 插件 是 CoddyKit 上的免费 Vue Academy 课时。这是第 3 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Vue Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Vue Academy 课程共包含 4 节课。

Vite 中的模块联邦

模块联邦最初用于 Webpack，但许多 Vue 应用使用 Vite。社区插件 @originjs/vite-plugin-federation 将模块联邦引入基于 Vite 的生产端和消费端。

安装插件

将插件同时添加到生产端应用（远程端）和消费端应用（宿主端）。

// terminal
// npm install -D @originjs/vite-plugin-federation

生产端配置

在生产端（远程端）的 vite.config.ts 中，添加 federation，并设置 name 以及一个将公开名称映射到本地文件的 exposes 对象。

import federation from "@originjs/vite-plugin-federation"

export default {
  plugins: [
    federation({
      name: "remote_app",
      filename: "remoteEntry.js",
      exposes: {
        "./Widget": "./src/components/Widget.vue",
      },
    }),
  ],
}

模块联邦的构建设置

该插件要求使用现代构建目标，并且在某些设置中需要禁用模块压缩。请设置构建目标，以便动态导入和顶层 await 正常工作。

export default {
  plugins: [federation({ /* ... */ })],
  build: {
    target: "esnext",
  },
}

exposes 对象

与 Webpack 一样，键是消费端使用的公开导入路径，值是本地源文件的路径。请只公开其他团队需要的内容。

exposes: {
  "./Widget": "./src/components/Widget.vue",
  "./useCart": "./src/composables/useCart.ts",
}

消费端配置

在消费端（宿主端）中，添加 federation，并设置一个 remotes 对象，将别名映射到远程端的 remoteEntry.js URL。

import federation from "@originjs/vite-plugin-federation"

export default {
  plugins: [
    federation({
      name: "host_app",
      remotes: {
        remote_app: "https://remote.example.com/assets/remoteEntry.js",
      },
    }),
  ],
}

remotes URL

该值是构建后 remoteEntry.js 的完整 URL。在开发环境中，它指向远程端的预览服务器；在生产环境中，它指向远程端部署后的 CDN 路径。

remotes: {
  remote_app: "https://remote.example.com/assets/remoteEntry.js",
}

共享依赖项

添加一个 shared 数组，使宿主端和远程端使用公共库的单一副本。列出 vue 至关重要，这样才能确保页面中只有一个 Vue 实例。

federation({
  name: "host_app",
  remotes: { /* ... */ },
  shared: ["vue", "pinia"],
})

使用远程组件

从别名和公开名称的组合路径导入组件。由于代码会在运行时获取，请使用动态导入并配合 defineAsyncComponent。

import { defineAsyncComponent } from "vue"

const Widget = defineAsyncComponent(() =>
  import("remote_app/Widget")
)

远程端的类型声明

TypeScript 不知道远程模块的类型。请声明这些类型，以便导入通过类型检查。

// remotes.d.ts
declare module "remote_app/Widget" {
  import type { DefineComponent } from "vue"
  const component: DefineComponent
  export default component
}

远程端使用预览而非开发服务器

模块联邦需要构建后的 remoteEntry.js，而 Vite 开发服务器不会以相同方式生成它。请构建远程端，并使用 vite preview 提供服务，以便宿主端能够获取它。

// remote terminal
// vite build && vite preview --port 5001

快速检查

检查您对 Vite 模块联邦插件的理解。

回顾

您学习了 Vite 模块联邦：

@originjs/vite-plugin-federation 将模块联邦引入 Vite。
生产端配置设置 name 和 exposes 对象（将公开名称映射到本地文件）。
消费端配置设置 remotes 对象，将别名映射到远程端的 remoteEntry.js URL。
在 shared 中列出共享依赖项，包括 vue。
通过动态 import("alias/Module") 使用远程模块；构建远程端后使用 vite preview 提供服务。

常见问题解答

「Vite Federation 插件」课时是免费的吗？

是的 — 「Vite Federation 插件」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Vue Academy 课程的其余内容，请升级到 CoddyKit PRO。 Vue Academy 课程共包含 4 节课。

「Vite Federation 插件」这节课中我会学到什么？

@originjs/vite-plugin-federation、生产者/消费者配置，以及动态导入远程模块你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Vue Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Vue Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 3 节课，共 4 节。

「Vite Federation 插件」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Vue Academy 课中编写并运行代码吗？

能。每节 Vue Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Vue Academy