nginx 配置 try_files $uri $uri/ /index.html; 可解决 spa 刷新子路由 404 问题，需置于 location / 块中，并前置静态资源和 api 的独立 location 规则以避免误兜底。
刷新子路由返回 404，不是前端代码出错，而是 Nginx 按真实文件路径查找时“扑空”了——因为 SPA 的所有路由都由 JS 控制，服务端根本没有 /user/profile 这样的物理文件。用 try_files 把请求兜底到 index.html，就能让前端路由重新接管，整个过程无跳转、不丢 history 状态。
核心配置：只在 location / 中写 try_files
必须把 try_files 放进处理前端页面的 location / 块里，不能放在 server 根级别，否则会干扰 API 或静态资源。标准写法是：
try_files $uri $uri/ /index.html;-
$uri先查有没有对应的真实文件（比如/js/app.js、/logo.png） -
$uri/再查同名目录（比如访问/assets/且该目录存在） -
/index.html是最终 fallback，所有不匹配的路径都内部重写到这里
避开静态资源被错误兜底的坑
如果只配了 location /，JS/CSS 图片等资源可能被误判为“不存在”，结果返回了 index.html 内容，导致控制台报错、样式丢失。正确做法是显式声明静态资源规则：
前端设计优化skill
下载
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
- 把静态资源 location 写在
location /之前或之后都行，但要确保它能被优先匹配（Nginx 按顺序匹配，正则 location 优先级高于前缀匹配） - 例如：
location ~* \.(js|css|png|jpg|gif|svg|woff2?|ttf|eot)$ { expires 1y; } - 这样
/js/app.js会走这个块直接返回，不会落到location /的try_files里
后端接口和子路径部署要单独处理
如果你的 API 在 /api/ 下，或者 SPA 部署在子路径如 /admin/，不能让它也被 try_files 拦截：
- 为 API 单独配一个
location /api/，里面用proxy_pass转发，不加try_files - 子路径部署时，用
alias+ 调整兜底路径，例如：location /admin/ { alias /var/www/my-app/; try_files $uri $uri/ /admin/index.html; } - 注意
alias末尾斜杠必须和 location 保持一致，否则路径拼接会出错
验证是否真正生效
改完配置别急着庆祝，做两个简单检查：
- 用 curl 请求一个不存在的前端路由，比如
curl -I https://yoursite.com/about，响应状态码应为200，不是404或302 - 打开浏览器开发者工具，刷新一个子页面，看 Network 面板中 JS/CSS 是否正常加载（状态码 200），HTML 响应内容确实是
index.html的源码 - 确认没有出现 “Failed to load resource” 类型的 404 报错
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
