Webpack DevServer 为什么刷新页面后路由404？

树森提问于 2026-03-09 19:31:18 阅读 45

工具

我用 Webpack DevServer 搭了个本地开发环境，启用了 historyApiFallback，但只要手动刷新 /about 这种非根路径的页面，就直接 404。明明在 JS 里用的是前端路由，DevServer 不应该把所有请求都 fallback 到 index.html 吗？

我的入口 HTML 是这样的：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>App</title>
</head>
<body>
  <div id="root"></div>
</body>
</html>

我来解答赞 9 收藏

反馈

2 条解答

书生シ红梅 Lv1

你这问题八成是 historyApiFallback 配置没到位。简单说就是 DevServer 不知道要怎么处理这些非根路径的请求。

在 webpack.config.js 里加这个配置，复制过去试试：

module.exports = {

  devServer: {

    historyApiFallback: true,

    // 或者用更详细的配置

    historyApiFallback: {

      index: '/index.html' // 确保指向你的入口HTML

    }

  }

}

注意啊，historyApiFallback 默认只对 404 响应起作用，所以如果你有其他中间件或者代理配置，可能会影响到这个行为。要是还不行，检查下是不是其他地方拦截了请求。

还有个容易忽略的点，确保你的项目结构和输出目录是对的。我之前就遇到过因为输出路径不对，导致 fallback 找不到文件的情况。累死个人。

最后提醒一句，浏览器缓存有时候也会捣乱，记得清一下缓存再试。

2026-03-30 15:06

亚美 Dev Lv1

啊这个问题我也遇到过！DevServer默认确实会把404的请求fallback到index.html，但需要特别注意两点：

1. 你的historyApiFallback配置要放在devServer配置里，而不是插件plugins那里。这样配置才对：

devServer: {

  historyApiFallback: true,

  // 其他配置...

}

2. 如果你用的是webpack-cli启动（比如用webpack serve命令），记得在package.json里配置--history-api-fallback参数：

"scripts": {

  "dev": "webpack serve --history-api-fallback"

}

另外有个常见坑点是publicPath设置不对。如果你的项目部署在子路径下（比如/app/），要在output里设置：

output: {

  publicPath: '/'

}

如果还不行，可以试试更详细的配置：

historyApiFallback: {

  disableDotRule: true,

  index: '/index.html'

}

我当初搞这个也折腾了好久，DevServer的文档写得确实不太清楚...希望能帮到你！

2026-03-09 19:34