0Pricing
Vue Academy · Aula

Plugin de Federation do Vite

@originjs/vite-plugin-federation, configuração de produtor/consumidor e importação dinâmica de remotos.

Plugin de Federation do Vite é uma aula grátis de Vue Academy no CoddyKit. Esta é a aula 3 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Vue Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Vue Academy inclui 4 aulas no total.

Federação no Vite

O Module Federation começou no Webpack, mas muitos aplicativos Vue usam Vite. O plug-in comunitário @originjs/vite-plugin-federation leva a federação a produtores e consumidores baseados em Vite.

Instalando o plug-in

Adicione o plug-in tanto ao aplicativo produtor (o remote) quanto ao aplicativo consumidor (o hospedeiro).

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

Configuração do produtor

Na configuração vite.config.ts do produtor (remote), adicione federation com um name e um objeto exposes que associe nomes públicos a arquivos locais.

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

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

Configurações de compilação para federação

O plug-in exige um destino de compilação moderno e, em algumas configurações, a desativação da minificação de módulos. Defina o destino de compilação para que as importações dinâmicas e o await no nível superior funcionem.

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

O objeto de exposição

Assim como no Webpack, as chaves são os caminhos públicos de importação usados pelos consumidores; os valores são caminhos para arquivos-fonte locais. Exponha apenas o que as outras equipes precisam.

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

Configuração do consumidor

No consumidor (hospedeiro), adicione federation com um objeto remotes que associe um alias à URL do remoteEntry.js do remote.

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

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

A URL dos remotos

O valor é a URL completa para o remoteEntry.js compilado. No desenvolvimento, você aponta para o servidor de pré-visualização do remote; em produção, para o caminho do remote implantado na CDN.

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

Dependências compartilhadas

Adicione uma matriz shared para que o hospedeiro e o remote usem uma única cópia das bibliotecas comuns. Incluir vue é essencial para manter uma única instância do Vue.

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

Consumindo um componente remoto

Importe usando o alias e o nome exposto. Use uma importação dinâmica com defineAsyncComponent, pois o código é buscado durante a execução.

import { defineAsyncComponent } from "vue"

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

Declarações de tipos para módulos remotos

O TypeScript não conhece os tipos dos módulos remotos. Declare-os para que as importações passem pela verificação de tipos.

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

Pré-visualização, não desenvolvimento, para módulos remotos

A federação precisa do remoteEntry.js compilado, que o servidor de desenvolvimento do Vite não produz da mesma maneira. Compile o remote e disponibilize-o com vite preview para que o hospedeiro possa buscá-lo.

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

Verificação rápida

Verifique sua compreensão do plug-in de federação do Vite.

Recapitulação

Você aprendeu a federação no Vite:

  • @originjs/vite-plugin-federation leva o Module Federation ao Vite.
  • A configuração do produtor define name e um objeto exposes (nome público para arquivo local).
  • A configuração do consumidor define um objeto remotes que associa um alias à URL do remoteEntry.js do remote.
  • Liste as dependências compartilhadas (incluindo vue) em shared.
  • Consuma por meio de import("alias/Module") dinâmica; compile o remote e use vite preview.

Perguntas Frequentes

A aula “Plugin de Federation do Vite” é grátis?

Sim — o texto completo de “Plugin de Federation do Vite” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Vue Academy, atualize para CoddyKit PRO. O curso de Vue Academy inclui 4 aulas no total.

O que vou aprender em “Plugin de Federation do Vite”?

@originjs/vite-plugin-federation, configuração de produtor/consumidor e importação dinâmica de remotos. Você pratica Vue Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Vue Academy?

Nenhuma experiência prévia é necessária. Vue Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 4.

Quanto tempo leva a aula “Plugin de Federation do Vite”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Vue Academy?

Sim. Cada aula de Vue Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. Princípios da arquitetura de micro-frontends
  2. Module Federation do Webpack com Vue
  3. Plugin de Federation do Vite
  4. Estado compartilhado entre micro-frontends
← Voltar para Vue Academy