vite项目中使用联邦模块module federation

使用vite-plugin-federation插件

• remote项目vite.config.ts 配置点：build.rollupOptions.plugins中添加federation

import federation from "@originjs/vite-plugin-federation";
{
    //...
    build:{
        //...
        rollupOptions:{
            //...
            plugins: [
              federation({
                name: "remoteApp",
                filename: "remoteEntry.js",
                exposes: {
                  "./common": "./src/common/index.ts"
                },
                shared: {
                  vue: {
                    singleton: true
                  }
                }
              })
            ]
        }
    }
}

可能遇到Top-level错误问题，可将build.target设置为'esnext'

• host端vite.config.ts配置点 plugins添加federation

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

{
    plugins:[
        federation({
          name: "hostApp",
          filename: "remoteEntry.js",
          remotes: {
            cddcrm: {
              external: "${remoteApp_host}/remoteEntry.js",
              externalType: "esm",
              from: "vite"
            }
          },
          shared: {
            vue: {
              singleton: true
            }
          }
        })
    ]
}

host端导入模块

    const loadRemoteComponent = async () => {
      const commonModule = await import("remoteApp/common");
      console.log("commonModule", commonModule);
      // 使用模块
    };
    loadRemoteComponent();

版本

• @originjs/vite-plugin-federation@^1.4.1
• vite@^6.0.3
• vue@^3.5.13