用 Nginx 托管 SPA 需 root 指向构建输出目录上层，配合 try_files $uri $uri/ /index.html 实现前端路由兜底；避免 alias 末尾斜杠、location 中混用 root、忽略 MIME/gzip 及 HTML 缓存问题。
用 Nginx 的 root 指令托管单页应用（SPA），关键在于让所有前端路由都 fallback 到 index.html，避免 404。单纯配 root 不够，必须配合 try_files 实现“前端路由兜底”。
正确设置 root 指向构建输出目录
root 指令指定的是文件系统路径的“根前缀”，不是完整路径。比如你的 Vue/React 项目执行 npm run build 后生成的静态文件在 /var/www/my-spa，那么应写：
root /var/www;
index index.html;
}
注意：root /var/www + 请求 /assets/js/app.js → 实际查找 /var/www/assets/js/app.js。确保构建产物放在 /var/www/my-spa/ 时，root 要对应到上层（如 /var/www），再用 location 或 alias 精确映射子路径。
必须加 try_files 实现 SPA 路由兜底
SPA 的前端路由（如 /user/123、/dashboard）在服务端并不存在真实文件，直接访问会返回 404。解决方案是：优先尝试匹配真实文件，找不到就返回 index.html，交由前端路由处理。
root /var/www/my-spa;
try_files $uri $uri/ /index.html;
}
说明：
-
$uri：匹配精确文件（如/logo.png→ 返回图片） -
$uri/：匹配目录（如/static/→ 尝试找该目录下的index.html） -
/index.html：兜底项，把所有未命中请求重写为/index.html，但不跳转（内部重写），浏览器 URL 不变
避免常见陷阱
以下写法容易出错，需特别注意：
- ❌ 错误使用
alias替代root且路径末尾多斜杠：alias /var/www/my-spa/;（末尾斜杠多余，可能造成路径拼接错误） - ❌ 在
location /subpath/中用root：会导致路径叠加，推荐改用alias；例如部署在https://example.com/app/，应写location /app/ { alias /var/www/my-spa/; } - ❌ 忘记配置 MIME 类型或 gzip：添加
include /etc/nginx/mime.types;和gzip on;提升资源加载体验 - ❌ index.html 缓存太强导致热更新失效：对 HTML 文件禁用缓存，其他静态资源可长期缓存
验证与调试建议
配置完记得重载 Nginx 并检查行为：
- 执行
sudo nginx -t确认语法正确 - 用
curl -I http://localhost/about查看是否返回 200 +Content-Type: text/html - 打开浏览器开发者工具 → Network 标签，确认 JS/CSS 加载正常，无 404
- 手动在地址栏输入一个前端路由（如
/admin），刷新后仍能正常渲染，说明 fallback 生效
