nginx 在 node.js + spa 场景中承担静态资源服务与前端路由兜底，需按顺序配置三类 location：api 代理、静态资源直送、/兜底返回 index.html；子路径部署须用 alias 且末尾带斜杠，配合带前缀的 try_files；推荐用 try_files 而非 rewrite，避免误伤和循环。
Node.js 应用本身不直接依赖 Nginx 做前端路由重写，但当它作为后端服务、同时需要托管前端 SPA（比如 Vue/React 构建产物）时，Nginx 就承担了静态资源服务 + 路由兜底的双重角色。核心不是重写给 Node.js，而是让所有非 API、非静态资源的请求，都返回 index.html，交由前端 JS 路由接管。
关键：区分三类请求，分别处理
Nginx 需明确识别并分流：
-
API 请求（如
/api/login、/v1/users）→ 反向代理到 Node.js 后端 -
真实静态资源（如
/js/app.js、/logo.png、/css/main.css）→ 直接读取文件并返回 -
前端路由路径（如
/dashboard、/user/123）→ 内部重写为/index.html，不跳转、URL 不变
标准配置结构（推荐顺序不能乱）
以下 location 块必须按此先后顺序书写，Nginx 按最长前缀+精确匹配优先执行：
- 先写
location ^~ /api/或location /v1/：代理 API 到 Node.js - 再写正则
location ~* \.(js|css|png|jpg|svg|woff2|ttf|eot|webp)$：命中即返回静态资源，并加缓存头 - 最后写
location /：兜底所有其他请求
示例片段：
location ^~ /api/ {
proxy_pass http://127.0.0.1:3000/;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
}
<p>location ~* .(js|css|png|jpg|jpeg|gif|ico|svg|woff2?|ttf|eot|webp)$ {
expires 1y;
add_header Cache-Control "public, immutable";
}</p><p>location / {
root /var/www/my-spa;
try_files $uri $uri/ /index.html;
}</p>子路径部署（如前端 base="/admin/"）
若前端构建时设了 base: "/admin/"，Nginx 必须同步适配：
- 用
alias替代root，且末尾带斜杠：alias /var/www/my-spa/; -
try_files的兜底路径要带前缀：try_files $uri $uri/ /admin/index.html; - location 路径必须以斜杠结尾：
location /admin/ { ... }
错误写法（如 location /admin 不加斜杠）会导致 alias 拼接异常，资源 404。
为什么不用 rewrite？
虽然 rewrite ^(.*)$ /index.html last; 看似简单，但它会无差别重写所有请求，容易误伤 API 和静态资源，还可能引发循环重写。而 try_files 是条件式内部查找，语义清晰、性能高、无副作用，是官方推荐方式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
