单页应用Nginx部署需正确配置location结构：静态资源用正则location提前拦截，API接口单独声明proxy_pass，根路径用try_files兜底至index.html，子路径用alias配合调整兜底路径。
直接在 location / 块里写 try_files $uri $uri/ /index.html; 就能解决单页应用刷新子路由 404 的问题，但必须配合正确的 location 结构和顺序，否则静态资源会加载失败、API 请求会返回 HTML。
基础结构：location / 必须包裹 try_files
这一行不能放在 server 块顶层，必须嵌套在 location / 内，并与 root 和 index 协同：
-
root /var/www/my-spa;—— 指向构建产物的根目录（含index.html） -
index index.html;—— 显式声明默认首页，防止某些边缘场景 fallback 失效 -
try_files $uri $uri/ /index.html;—— 顺序不能颠倒：先查真实文件，再查目录，最后兜底到入口 HTML
静态资源要提前拦截，避免被兜底
浏览器请求 /js/app.abc123.js 或 /img/logo.svg 时，Nginx 必须直接返回文件，而不是落到 /index.html。做法是加一条正则匹配的 location，且必须写在 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），才能安全启用长期缓存
后端接口路径必须单独声明
如果 API 都走 /api/，不单独配置就会被 try_files 拦下来，返回 index.html 内容，导致前端解析 JSON 失败：
-
location /api/ { proxy_pass http://backend/; }—— 注意proxy_pass末尾斜杠，确保路径转发正确 - 该
location必须写在location /之前，利用 Nginx 最长前缀匹配规则优先命中 - 类似地，
/auth/、/admin/等后端路径也应独立定义
部署在子路径时用 alias + 调整兜底路径
若访问地址是 https://example.com/myapp/，前端需设 base: "/myapp/"，Nginx 配置也要同步：
-
location /myapp/ { alias /var/www/my-spa/; }——alias后路径末尾必须带/ -
try_files $uri $uri/ /myapp/index.html;—— 兜底路径写成/myapp/index.html，Nginx 会自动拼接到alias目录下 - 多个子应用（如
/shop/、/user/）需各自独立location块，互不干扰
