Nginx 配置 try_files $uri $uri/ /index.html; 可解决 history 模式下刷新 404 问题：优先匹配静态文件或目录，否则返回 index.html 交由前端路由处理；配置后需 nginx -t 验证并 nginx -s reload 重载。
这个问题很常见，核心在于：history 模式下，前端路由路径（如 /user/profile）并不对应服务器上真实存在的文件，而 Nginx 默认只按路径找静态资源。一刷新，它就去请求 /user/profile 这个“不存在的文件”，自然返回 404。
理解为什么只有 history 模式会出问题
hash 模式（URL 带 #）能直接运行，是因为浏览器不会把 #/user/profile 发给服务器——服务器只收到根路径（如 /），总能返回 index.html，后续路由由 JS 处理。history 模式去掉了 #，URL 看起来像后端路由，但实际仍是单页应用，所有路由逻辑都在前端完成。所以服务器必须“兜底”，把所有非静态资源请求都导向 index.html。
关键配置：在 location 块中添加 try_files
打开你的 Nginx 配置文件（通常是 /etc/nginx/conf.d/your-site.conf 或 /www/server/nginx/conf/nginx.conf），找到对应的 server 块里的 location / 区域，加入这一行：
try_files $uri $uri/ /index.html;
立即学习“前端免费学习笔记（深入）”；
这行指令的意思是：
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
- 先检查请求路径是否对应一个真实存在的文件（
$uri），有就直接返回； - 没有的话，再检查是否为目录（
$uri/），是就尝试返回该目录下的索引页； - 都找不到，就统一返回
/index.html，交由前端路由接管。
完整示例片段：
location / {
root /www/wwwroot/your-project/dist;
index index.html;
try_files $uri $uri/ /index.html;
}
配置后务必验证并重载
别跳过这步，否则修改无效：
- 检查语法是否正确：
nginx -t，提示success才算通过； - 平滑重载配置：
nginx -s reload； - 如果用宝塔面板，修改前建议暂时停用“Nginx 防护插件”，它可能拦截或覆盖自定义配置导致
nginx -t报错； - 确认 dist 目录路径、
root和index的值与你实际部署结构一致。
补充建议：加一层前端 404 路由兜底
Nginx 的 try_files 解决了“找不到页面”的问题，但不能替代前端路由的错误处理。建议在 React Router（v6+）中配置通配路由：
{ path: '*', element: <NotFound /> }
这样当用户访问一个前端没定义的路径（比如 /xyz123），页面不会白屏或跳转异常，而是展示友好的 404 页面。
