刷新 /user/profile 会 404 是因为 nginx 默认按真实文件路径查找，而 spa 子路由在磁盘不存在，需通过 try_files $uri $uri/ /index.html 将未命中请求回退至 index.html；该指令顺序不可颠倒，且 api 和静态资源必须用高优先级 location 提前拦截，部署在子路径（如 /admin/）时需配合 alias 与匹配的 fallback 路径，并设置前端路由 base。
为什么刷新 /user/profile 会 404？
因为 Nginx 默认只按真实文件路径查找，而 SPA 的子路由（如 /user/profile）在磁盘上根本不存在。它不是后端接口，也不是静态文件，只是前端路由的 URL 片段。Nginx 没有被明确告知“找不到时该交给 index.html”，就只能返回 404。
try_files $uri $uri/ /index.html 的执行顺序不能错
这行指令不是“随便写写”，每个片段都有明确语义和触发条件：
-
$uri：查是否存在对应文件（如/assets/app.abc123.js） -
$uri/：查是否为目录（如请求/docs/，Nginx 会找/docs/index.html） -
/index.html：仅当以上都失败时才内部重写，不跳转、不改变 URL
顺序颠倒（比如把 /index.html 放最前）会导致所有请求直接返回 HTML；漏掉 $uri/ 会让目录类请求（如 /static/）直接 404；写成 / 而非 /index.html 可能触发外部重定向，破坏 history 模式。
API 和静态资源必须提前拦截，否则全被兜底
location / 是最低优先级匹配，如果前面没拦住，它就会接管一切——包括 /api/login 这种本该转发给后端的请求。结果是前端拿到 HTML 字符串，而不是 JSON，控制台报 Unexpected token 。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
正确做法是用更高优先级规则提前切走：
-
location ^~ /api/：用^~确保前缀匹配优先于正则，再proxy_pass http://backend -
location ~* \.(js|css|woff2|png|jpg|gif|svg)$：放在location /之前，启用缓存并避免被兜底 - 所有静态资源路径（如
/img/、/fonts/）也建议用location ^~ /img/显式声明
部署在子路径（如 /admin/）时，alias 和回退路径要配对
如果项目部署在 http://example.com/admin/，就不能只写 try_files $uri $uri/ /index.html——因为 /index.html 指的是根目录下的文件，而实际入口在 /admin/index.html。
此时必须配合 alias 使用：
-
location /admin/ { alias /var/www/myapp/dist/; }（注意末尾斜杠） -
try_files $uri $uri/ /admin/index.html;（fallback 路径与 URL 前缀一致） - 同时前端路由需设置
base: '/admin/'，否则 Vue Router 或 React Router 无法解析路径
最容易忽略的是 alias 路径末尾的 / 和 fallback 中的 /admin/index.html 必须严格对应——差一个字符，整个回退链就断了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
