在 Nginx 中用 alias 配置子路径部署的前端单页应用（如 /admin/、/app-v2/）时，刷新深层路由（如 /admin/user/profile）报 404，根本原因不是 try_files 写错了，而是 alias 路径映射逻辑和兜底路径不匹配。正确配置必须同时满足三要素：前端 base 设置、Nginx alias 定义、try_files 回退路径三者严格对齐。

确保前端构建输出适配子路径

Vue 项目需在 vue.config.js 中设 publicPath: '/admin/'；React（CRA）需在 package.json 中加 "homepage": "/admin/"；Vite 项目设 base: '/admin/'。构建后所有资源路径（JS/CSS/图片）自动带前缀，例如：/admin/static/js/app.abc.js。若没设 base，资源请求会变成 /static/js/...，Nginx 找不到对应文件，直接 404。

alias 必须带尾斜杠，且指向构建产物根目录

alias 后路径末尾必须加 /，否则 Nginx 不会做路径拼接，导致 $uri 匹配失败：

前端设计优化skill

前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。

下载

• ✅ 正确写法：alias /var/www/my-admin/dist/;（末尾有斜杠）
• ❌ 错误写法：alias /var/www/my-admin/dist;（无斜杠，Nginx 将其视为完整路径替换，$uri 无法正常解析）

物理目录结构应为：/var/www/my-admin/dist/index.html 和 /var/www/my-admin/dist/static/... 等。确保该目录可读，且 index.html 确实存在。

try_files 的兜底路径必须带子路径前缀

因为 alias 已将 /admin/ 映射到本地目录，Nginx 在查找 /admin/index.html 时，会自动拼成 /var/www/my-admin/dist/index.html。所以 不能写 /index.html，必须写 /admin/index.html：

• ✅ 正确配置：

location /admin/ {
  alias /var/www/my-admin/dist/;
  try_files $uri $uri/ /admin/index.html;
}

• ❌ 常见错误：漏掉前缀 → try_files $uri $uri/ /index.html;，此时 Nginx 去找根目录下的 /index.html，而它不在 alias 映射范围内，返回 404。

避免静态资源与 API 请求被误兜底

alias + try_files 只管当前 location 范围内请求。若还有其他子应用或接口，需独立定义 location 防止干扰：

• API 接口（如 /admin/api/）建议单独配代理：location /admin/api/ { proxy_pass http://backend/; }，放在 location /admin/ 之前
• 若共存多个子应用（如 /shop/、/user/），每个都用独立 location + alias + 带前缀的 try_files，互不覆盖
• 不要在该 location 内加 rewrite 或 proxy_pass，会破坏 try_files 的内部重写流程

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！