nginx 服务前端 spa 需配置 fallback 路由：用 try_files $uri $uri/ /index.html 将非静态资源请求回退至 index.html；先定义静态资源 location（如 js/css/图片等），再配置 location /；api 请求通过 location /api/ 代理；注意 root 路径正确及 location 顺序。
要让 Nginx 正确服务前端单页面应用（如 Vue、React 的 SPA），关键在于：所有非真实静态文件的请求，都应 fallback 到 index.html，由前端路由接管。否则刷新页面或直接访问子路由会返回 404。
配置 location 匹配静态资源路径
明确指定哪些路径是真实存在的静态资源（JS、CSS、图片等），避免被 fallback 规则误捕获：
- 通常把构建产物放在
/dist或/public目录下，Nginx 需指向该目录的root - 用
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff2?|ttf|eot)$精准匹配静态资源后缀，并添加缓存头 - 确保这些 location 块在
location /之前定义，利用 Nginx 的最长前缀匹配优先级
设置 SPA 的 fallback 路由
对根路径及所有其他路径（除已明确匹配的静态资源外），统一返回 index.html，交由前端 router 处理：
前端设计优化skill
下载
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
- 在
location /块中使用try_files $uri $uri/ /index.html; -
$uri检查是否存在对应文件；$uri/检查是否为目录；最后 fallback 到/index.html - 注意不要写成
try_files $uri /index.html;（缺少$uri/），否则带斜杠的子目录请求可能出错
处理 API 请求代理（可选但常见）
开发或联调时，常需将 /api/ 请求反向代理到后端服务，避免跨域问题：
- 添加独立 location 块：
location /api/ { proxy_pass http://backend_server/; }（注意末尾斜杠） - 确保该块位于
location /之前，防止被 fallback 规则覆盖 - 建议加上
proxy_set_header Host $host;和proxy_set_header X-Real-IP $remote_addr;保持原始请求信息
验证与常见陷阱
配置完成后需检查几个关键点：
- 确认
root指向的是构建后的静态文件根目录（如/var/www/myapp），且index.html确实存在其中 - 浏览器开发者工具 Network 标签中，刷新子路由（如
/user/profile）应返回 200 +index.html内容，而非 404 - 如果遇到 404 且日志显示 “open() ‘…/user/profile’ failed”，说明
try_files未生效，大概率是 location 顺序或 root 路径错误 - 避免在
location /中误加rewrite，这会干扰try_files行为
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
