直接用try_files $uri $uri/ /index.html;就能解决spa刷新404，但必须置于location /块内，配合root指向构建目录、index index.html显式声明，并单独配置location /api/代理后端及正则匹配静态资源以避免误兜底。
直接用 try_files $uri $uri/ /index.html; 就能解决单页应用刷新 404，但必须放在 location / 块里，配合正确的 root 和静态资源隔离策略。
核心写法和位置不能错
这一行不能丢在 server 块顶层，必须嵌套在 location / { } 中：
-
root /var/www/my-app;指向构建产物根目录（含index.html文件） -
index index.html;显式声明默认首页，避免某些边缘场景 fallback 失效 -
try_files $uri $uri/ /index.html;顺序不可调换：先查真实文件，再查同名目录，最后兜底
防止 API 请求被错误兜底
如果后端接口走 /api/ 这类路径，不单独配置就会被 try_files 拦下来返回 HTML，前端解析失败：
前端设计优化skill
下载
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
- 加一个独立的
location /api/ { proxy_pass http://backend; } - 这个块必须写在
location /之前，Nginx 按最长前缀匹配，优先命中 - 类似地，
/auth、/admin等后端路径也要单独剥离
静态资源要提前拦截
JS、CSS、图片等必须直出，不能落到 /index.html。用正则 location 提前匹配并缓存：
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff2?|ttf|eot|webp)$ { expires 1y; add_header Cache-Control "public, immutable"; }- 这条规则要放在
location /之前，确保资源请求不进入try_files流程 - 构建时启用 content hash（如
app.a1b2c3.js），才能安全启用长期缓存
子路径部署要同步适配
如果应用跑在 https://example.com/app/，前端需设 base: "/app/"，Nginx 也要对应调整：
- 用
alias：location /app/ { alias /var/www/my-app/; try_files $uri $uri/ /app/index.html; } - 注意
/app/必须以斜杠结尾，否则alias行为异常 - 或用
root+ 调整路径：location /app/ { root /var/www; try_files $uri $uri/ /my-app/index.html; }
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
