0Pricing
Vue Academy · Lektion

Vite Federation Plugin

@originjs/vite-plugin-federation, Einrichtung von Producer und Consumer sowie dynamischer Import von Remotes

Vite Federation Plugin ist eine kostenlose Vue Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Vue Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.

Federation mit Vite

Module Federation wurde ursprünglich für Webpack entwickelt, aber viele Vue-Apps verwenden Vite. Das Community-Plugin @originjs/vite-plugin-federation bringt Federation zu Produzenten und Konsumenten auf Vite-Basis.

Das Plugin installieren

Fügen Sie das Plugin sowohl der produzierenden App (dem Remote) als auch der konsumierenden App (dem Host) hinzu.

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

Konfiguration des Produzenten

Fügen Sie in der produzierenden App (dem Remote) in vite.config.ts eine federation-Konfiguration mit einem name und einem exposes-Objekt hinzu, das öffentliche Namen lokalen Dateien zuordnet.

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

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

Build-Einstellungen für Federation

Das Plugin erfordert ein modernes Build-Ziel sowie in manchen Setups eine deaktivierte Modul-Minifizierung. Legen Sie das Build-Ziel so fest, dass dynamische Imports und Top-Level-Await funktionieren.

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

Das exposes-Objekt

Wie bei Webpack sind die Schlüssel die öffentlichen Importpfade, die Konsumenten verwenden, und die Werte Pfade zu lokalen Quelldateien. Stellen Sie nur das bereit, was andere Teams benötigen.

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

Konfiguration des Konsumenten

Fügen Sie im konsumierenden Projekt (dem Host) eine federation-Konfiguration mit einem remotes-Objekt hinzu, das einen Alias der URL des remoteEntry.js des Remotes zuordnet.

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

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

Die URL der Remotes

Der Wert ist die vollständige URL zum erstellten remoteEntry.js. In der Entwicklung verweisen Sie auf den Preview-Server des Remotes, in der Produktion auf dessen bereitgestellten CDN-Pfad.

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

Gemeinsame Abhängigkeiten

Fügen Sie ein shared-Array hinzu, damit Host und Remote eine gemeinsame Kopie häufig verwendeter Bibliotheken nutzen. Das Auflisten von vue ist entscheidend, damit nur eine Vue-Instanz verwendet wird.

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

Eine Remote-Komponente verwenden

Importieren Sie über den Alias und den bereitgestellten Namen. Verwenden Sie einen dynamischen Import mit defineAsyncComponent, da der Code zur Laufzeit abgerufen wird.

import { defineAsyncComponent } from "vue"

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

Typdeklarationen für Remotes

TypeScript kennt die Typen der Remote-Module nicht. Deklarieren Sie sie, damit die Imports einer Typprüfung unterzogen werden können.

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

Preview statt Dev für Remotes

Federation benötigt das erstellte remoteEntry.js, das der Vite-Dev-Server nicht auf dieselbe Weise erzeugt. Erstellen Sie das Remote und stellen Sie es mit vite preview bereit, damit der Host es abrufen kann.

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

Kurzer Check

Überprüfen Sie Ihr Verständnis des Vite-Federation-Plugins.

Zusammenfassung

Sie haben Vite Federation kennengelernt:

  • @originjs/vite-plugin-federation bringt Module Federation zu Vite.
  • Die Produzenten-Konfiguration legt name und ein exposes-Objekt fest (öffentlicher Name zu lokaler Datei).
  • Die Konsumenten-Konfiguration legt ein remotes-Objekt fest, das einen Alias der URL des remoteEntry.js des Remotes zuordnet.
  • Führen Sie gemeinsame Abhängigkeiten, einschließlich vue, in shared auf.
  • Verwenden Sie dynamisch import("alias/Module"); erstellen Sie das Remote und stellen Sie es mit vite preview bereit.

Häufig gestellte Fragen

Ist die Lektion „Vite Federation Plugin“ kostenlos?

Ja — der vollständige Text von „Vite Federation Plugin“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Vue Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Vite Federation Plugin“?

@originjs/vite-plugin-federation, Einrichtung von Producer und Consumer sowie dynamischer Import von Remotes Du übst Vue Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Vue Academy zu starten?

Keine Vorkenntnisse erforderlich. Vue Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.

Wie lange dauert die Lektion „Vite Federation Plugin“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Vue Academy-Lektion Code schreiben und ausführen?

Ja. Jede Vue Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

  1. Prinzipien der Micro-Frontend-Architektur
  2. Webpack Module Federation mit Vue
  3. Vite Federation Plugin
  4. Gemeinsamer Status über Micro-Frontends hinweg
← Zurück zu Vue Academy