webpack-dev-server historyApiFallback多级路由失效问题排查

这个问题我之前在开发单页应用时也碰到过，本质是静态资源的路径解析逻辑问题，咱们一步步拆解：

为什么会出现404？ #

当你访问多级路由localhost:8080/abc/xyz时，浏览器会默认把当前URL的父路径（也就是/abc/）当成资源请求的基准路径。这时候页面里引用的scripts/bundle.js就会被解析成/abc/scripts/bundle.js，但你的打包资源实际是放在根目录的/scripts/bundle.js下的，自然就返回404了。

解决方法 #

这里有两个最直接的修复方案，根据你的项目情况选就行：

1. 配置Webpack的publicPath为绝对路径 #

在你的Webpack配置文件中，给output选项加上publicPath: '/'，这样Webpack打包时会自动给所有资源引用加上根路径前缀，不管当前路由是几级，都会正确请求/scripts/bundle.js。

示例配置代码：

module.exports = {
  // ...其他配置项
  output: {
    filename: 'scripts/bundle.js',
    publicPath: '/' // 这行是关键！
  },
  devServer: {
    historyApiFallback: true // 你已有的配置
  }
};

2. 手动修改HTML中的资源引用为绝对路径 #

如果你的HTML是手动编写的（而非Webpack自动注入），直接把资源的相对路径改成绝对路径——在路径开头加上斜杠/，比如：
把

<script src="scripts/bundle.js"></script>

改成

<script src="/scripts/bundle.js"></script>

斜杠会告诉浏览器从网站根目录开始查找资源，不会受当前路由层级影响。

额外提示（生产部署场景） #

如果以后要把项目部署到非根目录（比如https://your-domain.com/my-app/），只需要把publicPath改成对应路径即可，比如：

publicPath: '/my-app/'

同时确保服务器的historyApiFallback配置也指向正确的首页位置（比如/my-app/index.html）。

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