Vite微前端本地调试：remoteEntry.js无法找到问题求助

以下是针对你遇到的「宿主应用无法找到remoteEntry.js」问题的具体解决步骤：

1. 确认远程应用的运行方式 #

@originjs/vite-plugin-federation在vite dev开发模式下默认不会生成remoteEntry.js，这个文件属于构建产物。你需要先对远程应用执行构建命令，再启动预览服务：

# 远程应用目录下执行
vite build
vite preview --port 8080

2. 修正宿主应用的remote路径 #

构建远程应用后，查看dist目录结构，你会发现remoteEntry.js直接放在dist根目录，而非assets子目录。所以宿主应用的vite.config.js里的remote路径需要修改：

// 原错误配置
remotes: {
  myLib: "http://localhost:8080/assets/remoteEntry.js",
},
// 修改为
remotes: {
  myLib: "http://localhost:8080/remoteEntry.js",
},

3. 可选：开发模式下直接调试微前端（无需先构建） #

如果想在开发模式下直接调试，不用每次都构建，需要给远程和宿主的federation插件做如下调整：

远程应用vite.config.js修改： #

export default defineConfig({
  server: {
    port: 8080,
    cors: true, // 允许宿主应用跨域访问
  },
  plugins: [
    vue(),
    federation({
      name: "myLib",
      filename: "remoteEntry.js",
      exposes: {
        "./Counter": "./src/components/Counter.vue",
      },
      remotes: {},
      shared: ["vue"],
      devOrigin: "http://localhost:8080", // 指定开发环境的远程服务地址
    }),
  ],
});

宿主应用vite.config.js修改： #

federation({
  name: "myApp",
  remotes: {
    myLib: "myLib@http://localhost:8080/remoteEntry.js", // 格式改为「远程名称@地址」
  },
  shared: ["vue"],
}),

调整后，远程应用可以直接用vite dev启动，宿主应用也能正常加载remoteEntry.js了。

内容的提问来源于stack exchange，提问作者pdro_99