React微前端Module Federation：publicPath:auto刷新时路径错误求助

问题核心 #

使用Module Federation的React微前端项目中：

• 硬编码publicPath: "http://localhost:3000/"时资源请求正常，但受限于CI/CD配置，无法在构建阶段固定该值
• 改用publicPath: "auto"解决了构建硬编码问题，但在嵌套URL（如http://localhost:3000/home/foo/about）刷新时，remoteEntry.js和main.js会从http://localhost:3000/home/foo/remoteEntry.js请求，导致应用崩溃
• 尝试过react-router-dom@6.3.0、@reach/router@1.3.4以及GitHub issue#102中的方案，均未解决

解决方案 #

通过运行时动态设置webpack publicPath，强制资源从根路径加载，无需构建时硬编码：

1. 在项目入口文件（如src/index.jsx或src/index.js）的最顶部添加以下代码：

__webpack_public_path__ = window.location.origin + '/';

2. 保持webpack.config.js中的publicPath: "auto"配置不变

原理说明 #

• publicPath: "auto"会根据当前页面的URL计算相对资源路径，嵌套路由下相对路径会指向当前路由的父级目录，导致资源请求路径错误
• 运行时设置__webpack_public_path__为window.location.origin + '/'，强制所有资源从域名根路径加载，不受当前路由影响，同时适配不同环境的域名（符合CI/CD动态部署的需求）

验证步骤 #

1. 重启开发服务器
2. 访问嵌套路由（如/home/foo/about）并刷新页面
3. 查看浏览器网络请求，确认remoteEntry.js的请求路径为http://localhost:3000/remoteEntry.js（根路径）

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