直接原因是 alias 与 SPA 路由机制冲突且路径拼接逻辑误用，导致刷新时返回 404；正确做法是 SPA 主入口用 root + try_files $uri $uri/ /index.html，子路径（如 /assets/）才用 alias，并确保 location 和 alias 均以 / 结尾。
直接原因是 alias 与前端 SPA 的路由机制冲突，加上路径拼接逻辑被误用，导致 Nginx 在刷新时找不到对应资源，返回 404。
确认 alias 是否适用于当前场景
alias 不适合用于根目录或 SPA 入口的 location /；它更适合映射子路径（如 /assets/、/static/），且必须指向具体目录而非整个应用入口。若你用 alias /path/to/dist/; 配在 location / { } 块里，Nginx 会把所有请求（包括 /user/profile）强行映射到 /path/to/dist/user/profile —— 而这个文件实际不存在，必然 404。
- ✅ 正确做法：对 SPA 主入口统一用 root + try_files，例如：
location / { root /path/to/dist; try_files $uri $uri/ /index.html; } - ❌ 错误写法：
location / { alias /path/to/dist/; }（alias 不支持目录级 fallback，且 location / 匹配空字符串后替换为空，结果路径错乱）
静态资源路径需与前端构建配置对齐
即使 alias 写对了，如果前端打包时 publicPath 或 base 设置为 /，而实际部署在子路径（如 https://example.com/myapp/），那么生成的 <script src="/js/app.js"> 就会请求根路径，Nginx 可能因 location 匹配不到而报 404，或错误地转发给后端。
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
- 若部署在子路径，Vue 项目需设
publicPath: "/myapp/"，React 项目设homepage: "https://example.com/myapp" - 同时 Nginx 中对应子路径要单独配置，例如：
location /myapp/ { alias /path/to/dist/; }（注意结尾斜杠必须存在） - 该 location 下仍需加
try_files $uri $uri/ /myapp/index.html;，否则深层路由刷新仍 404
检查 alias 路径拼接是否出错
alias 的核心是“完全替换”，不是“追加”。常见错误是漏掉斜杠，导致路径粘连：
立即学习“前端免费学习笔记（深入）”；
- ❌
location /assets/ { alias /opt/app/public; }→ 请求/assets/js/app.js实际查找/opt/app/publicjs/app.js（/assets/ 被删，但 alias 后没 /，于是 assets 后的 js 直接粘上去） - ✅ 正确写法：
location /assets/ { alias /opt/app/public/; }（两个 / 都不可少） - 验证技巧：在该 location 里临时加
return 200 "real path: $request_filename";，curl 一下看输出的真实路径是否符合预期
优先用 root + try_files 处理 SPA 入口
对于绝大多数前端部署场景，root 比 alias 更直观、更安全，尤其配合 try_files 可天然支持 history 路由。
- 标准配置示例：
server {<br> listen 80;<br> server_name example.com;<br> root /var/www/myapp/dist;<br> index index.html;<br> location / {<br> try_files $uri $uri/ /index.html;<br> }<br>} - 该配置下，无论访问 /、/about、/user/123，Nginx 都先尝试找真实文件，找不到就回退到 index.html，由前端路由接管
- 若还需代理 API，另开 location /api/ { proxy_pass ... } 即可，互不干扰
