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

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

工具

我用 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>

我来解答赞 2 收藏

反馈

1 条解答

亚美 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