Why federation cannot be used in Vite+Vue3

[gyt95]

I have 2 webapp, both Vite3+Vue3. I want to expose component from webapp1, and use it in webapp2. But it is no any effect, why?

webapp1

// vite.config.ts
import { defineConfig } from 'vite'
import federation from '@originjs/vite-plugin-federation'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
  // ...ViteBaseConfig,
  server: {
    port: 8010,
    host: '0.0.0.0'
  },
  base: 'http://127.0.0.1:8010',
  plugins: [
    vue(),
    federation({
      name: 'app1',
      filename: 'remoteEntry.js',
      exposes: {
        './List': './src/components/List.vue'
      },
      shared: ['vue']
    })
  ],
  build: {
    minify: false,
    target: ["chrome89", "edge89", "firefox89", "safari15"]
  }
})

webapp2

import { defineConfig } from 'vite'
import federation from '@originjs/vite-plugin-federation'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
  // ...ViteBaseConfig,
  server: {
    port: 8020,
    host: '0.0.0.0'
  },
  plugins: [
    vue(),
    federation({
      name: 'app2',
      remotes: {
        app1: 'http://localhost:8010/assets/remoteEntry.js'
      },
      shared: ['vue']
    })
  ],
  build: {
    minify: false,
    target: ['chrome89', 'edge89', 'firefox89', 'safari15']
  }
})

// main.ts
import { createApp, defineAsyncComponent } from 'vue'
import App from './App.vue'

const app = createApp(App)
const RemoteList = defineAsyncComponent(() => import('app1/List'))

app.component('RemoteList', RemoteList)
app.mount('#app')

<!-- App.vue -->
<template>
  <div>
    <RemoteList></RemoteList>
  </div>
</template>

I have run build webapp1 first, and generate /dist folder in webapp1, remoteEntry.js is in /dist/assets. Where's wrong?

[gyt95]

I finally found the answer.

My previous execution steps were like this:

// webapp1 - exposes
pnpm build
pnpm dev

// webapp2 - remotes
pnpm dev

But in fact, a core of module federation is that the modules it calls remotely are from the production environment. So even for local development, a static web server should be started so that remote modules can be introduced.

Therefore, the reliance is on the vite preview command, which will start a static web server locally with the dist folder running at http://localhost:4173 . In this way, check whether the build product is available normally in the local environment.

So I added a new command preview: "vite preview", and in vite.config.ts of webapp2, changed 8010 in the remotes property of federation to 4173. This port number is the port number after webapp1 executes pnpm preview.

So local debugging of remote modules requires the following steps:

// webapp1 - exposes
pnpm build
pnpm preview

// webapp2 - remotes
pnpm dev