React项目从Hash Router切换到BrowserRouter后Webpack异常求助

问题1：/public文件夹资源无法加载 #

原因：切换到BrowserRouter后，路由是真实路径（如/portfolio），如果资源用相对路径引用（比如./images/logo.png），浏览器会从当前路由路径下去查找资源，而非根目录的/public文件夹。

解决办法：

• 所有public内的资源引用改用绝对路径，比如把./images/logo.png改成/images/logo.png（Webpack已配置publicPath: "/"，根路径直接指向public文件夹）
• 如果是通过import引入的图片，Webpack的asset/resource规则会自动处理路径，确保输出到public并生成正确的绝对路径引用，这种情况无需手动修改。

问题2：Webpack在子路由目录查找main.js导致MIME错误 #

原因：index.html里的<script src="main.js"></script>是相对路径，当访问/portfolio时，浏览器会请求/portfolio/main.js，但该文件不存在，服务器因开启historyApiFallback返回了index.html，从而出现MIME类型不匹配的错误。

解决办法：
修改public/index.html里的script标签，将相对路径改为绝对路径：

<script src="/main.js"></script>

额外验证点 #

保持Webpack配置里的两项设置不变，它们是BrowserRouter正常工作的必要项：

• output.publicPath: "/"：确保所有打包后的资源都从根路径加载
• devServer.historyApiFallback: true：确保刷新子路由时，服务器返回index.html，由React Router处理路由逻辑

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