history模式刷新报404的根本原因是nginx未配置前端路由兜底,需在location /中添加try_files $uri $uri/ /index.html;并确保api代理规则(如/location /api/)置于其前,最后执行nginx -t和nginx -s reload生效。

History 模式刷新报 404,根本原因在于:浏览器真的向服务器发起了请求,而 Nginx 默认只服务真实存在的文件或目录。比如访问 /user/profile,它会去磁盘找这个路径下的 HTML 或静态资源——但实际并不存在,于是返回 404。
为什么只有 History 模式出问题?
Hash 模式 URL 带 #(如 /#/user/profile),# 及之后内容不会发送给服务器,Nginx 永远只收到 /,自然能返回 index.html;History 模式去掉了 #,URL 看起来像后端接口,但其实仍是单页应用,所有路由逻辑都在前端 JS 中完成——服务器必须“兜底”把这类请求都交还给前端处理。
核心配置:用 try_files 实现前端路由兜底
在 Nginx 的 server 块中、location / 区域内添加这一行:
try_files $uri $uri/ /index.html;
它的执行逻辑是:
- 先检查请求路径是否对应一个真实文件(如
/js/app.js),有则直接返回 - 没有的话,再检查是否为目录(如
/assets/),是则尝试返回该目录索引 - 以上都不匹配,就统一返回
/index.html,由前端路由接管渲染
特别注意 location 优先级,避免路由“串台”
如果同时代理后端 API(比如 /api/),务必把 API 的 location 块写在 location / 之前,否则 try_files 会提前兜底,导致 /api/user 也被重定向到 index.html,最终请求错误地发给前端而非后端:
错误写法(兜底太早):
location / { try_files $uri $uri/ /index.html; }location /api/ { proxy_pass http://backend; }
正确写法(API 优先匹配):
location /api/ { proxy_pass http://backend; }location / { try_files $uri $uri/ /index.html; }
验证与生效
修改完配置后,务必执行两步:
-
nginx -t检查语法是否正确 -
nginx -s reload平滑重载配置(不中断服务)
宝塔用户可在网站 → 设置 → 配置文件中直接编辑,在 location / 内添加 try_files 行即可保存生效。











