github案例地址：https://github.com/originjs/vite-plugin-federation/

使用vue3-advanced-demo作为案例

在根目录下执行

pnpm i

pnpm build

在team-red中的vite.config.ts中：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import federation from "@originjs/vite-plugin-federation"
import ElementPlus from 'unplugin-element-plus/vite'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    ElementPlus(),
    vue(),
    federation({
      name: 'team-red',
      remotes: {
        "team-blue": "http://192.168.176.171:8081/assets/remoteEntry.js",
        "team-green": "http://192.168.176.171:8082/assets/remoteEntry.js",
      },
      shared: ['vue','pinia']
  })
  ],
  build:{
    minify:false,
    target: ["chrome89", "edge89", "firefox89", "safari15"]
  }
})

部署ng的配置：

#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;
    
    sendfile        on;
    keepalive_timeout  65;

    server {
        listen       80;
        server_name  localhost;
        root /usr/local/nginx/html/red;
        index index.html;

        # 静态资源 - 长期缓存
        location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
            expires 1y;
            add_header Cache-Control "public, immutable";
            # 添加 CORS 头到静态资源
            add_header Access-Control-Allow-Origin *;
            add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
            add_header Access-Control-Allow-Headers 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
            try_files $uri =404;
        }

        # 其他请求 - 返回 index.html
        location / {
            try_files $uri /index.html;
            add_header Access-Control-Allow-Origin *;
            add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
        }
    }

    server {
        listen       8081;
        server_name  localhost;
        root /usr/local/nginx/html/blue;
        index index.html;

        # 静态资源 - 长期缓存
        location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
            expires 1y;
            add_header Cache-Control "public, immutable";
            # 添加 CORS 头到静态资源
            add_header Access-Control-Allow-Origin *;
            add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
            add_header Access-Control-Allow-Headers 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
            try_files $uri =404;
        }

        location / {
            try_files $uri /index.html;
            add_header Access-Control-Allow-Origin *;
            add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
        }
    }

    server {
        listen       8082;
        server_name  localhost;
        root /usr/local/nginx/html/green;
        index index.html;

        # 静态资源 - 长期缓存
        location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
            expires 1y;
            add_header Cache-Control "public, immutable";
            # 添加 CORS 头到静态资源
            add_header Access-Control-Allow-Origin *;
            add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
            add_header Access-Control-Allow-Headers 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
            try_files $uri =404;
        }

        location / {
            try_files $uri /index.html;
            add_header Access-Control-Allow-Origin *;
            add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
        }
    }
}

访问：http://192.168.176.171/