devServer.historyApiFallback专为SPA的History路由设计，启用后将未匹配路径兜底返回index.html，由前端路由接管；设为true可覆盖多数场景，配合rewrites可精准排除api/assets等静态资源，需确保proxy配置在其之前以避免拦截。
Webpack 的 devServer.historyApiFallback 是专为单页应用（SPA）设计的配置项，用来解决 History 模式下刷新页面或直接访问二级路由时返回 404 的问题。它的本质是让开发服务器在找不到对应路径时，不返回错误，而是把请求兜底到 index.html，由前端路由接管渲染。
基础用法：设为 true 即可覆盖大部分场景
最常用也最推荐的写法是直接启用 fallback：
- 在
webpack.config.js的devServer配置中添加：historyApiFallback: true - 这等价于内部自动匹配所有非静态资源请求（比如
/user/profile、/admin），全部重定向到/index.html - 适用于 Vue Router（
createWebHistory）、React Router（createBrowserRouter）等标准 History 模式路由
精准控制：用对象配置排除静态资源和 API
如果项目中有真实存在的静态文件（如 /assets/logo.png）或后端接口（如 /api/users），盲目兜底会导致这些请求也被重写到 index.html，引发资源加载失败或接口 404。这时应显式排除：
- 写法示例：
historyApiFallback: {<br> rewrites: [<br> { from: /^\/(api|assets|static)\//, to: '/404.html' },<br> { from: /.*/, to: '/index.html' }<br> ]<br>} -
from是正则表达式，用于匹配原始请求路径；to是重定向目标 - 优先匹配
api、assets等路径，避免干扰；其余全部交给index.html
配合其他 devServer 配置确保生效顺序
historyApiFallback 不是独立运行的，它依赖于请求是否被前面的规则拦截。尤其当你启用了 proxy 代理时，顺序很重要：
- proxy 必须放在 historyApiFallback 之前，否则 API 请求可能被 fallback 拦截
- 正确顺序示例：
devServer: {<br> proxy: { '/api': { target: 'http://localhost:3000', changeOrigin: true } },<br> historyApiFallback: true<br>} - 如果使用了
contentBase或static（Webpack 5+），也要确认它们不会覆盖 fallback 行为
验证是否生效的小技巧
启动开发服务器后，可以快速验证配置是否起作用：
- 打开浏览器，直接访问一个不存在的路由路径，例如
http://localhost:8080/abc/def - 查看 Network 面板：响应状态应为 200，内容是
index.html的源码，而不是 404 - 检查 Response Headers 中是否有
X-Webpack-Dev-Server-Proxy或类似标识（部分版本会标记 fallback 触发） - 若仍返回 404，请检查是否漏写了
historyApiFallback，或被其他中间件（如自定义 middleware）提前终止了请求
