要让静态单页应用在二级目录(如 /app/)下正常工作,关键在于 index、try_files 与 root/alias 的协同配置:用 alias 更推荐,避免路径拼接错误;root 需确保构建产物位于对应子目录;必须添加 try_files $uri $uri/ /app/index.html 支持前端路由;需确认 index.html 存在、权限正确且命名全小写;重载后验证根路径与子路由均返回 index.html。

要让静态单页应用(SPA)在二级目录(如 /app/)下正常工作,关键不是只靠 index 指令,而是让它和 try_files、root/alias 协同配合——否则刷新子路由(如 /app/user)会直接 404。
明确二级目录的物理路径映射方式
先决定用 root 还是 alias,二者行为不同,直接影响 index 查找位置:
-
用
alias更推荐:它把 location 路径“替换”为指定目录,避免拼接出错。例如:location /app/ { alias /var/www/my-spa/; index index.html; }
→ 请求/app/直接查找/var/www/my-spa/index.html -
用
root需注意路径拼接:Nginx 会在 root 后追加 location 路径。例如:location /app/ { root /var/www; index index.html; }
→ 实际查找的是/var/www/app/index.html,所以你的构建产物必须放在/var/www/app/下
配置 fallback 路由支持前端路由
仅设 index index.html 不够——它只对以 / 或 /app/ 结尾的请求生效;而 SPA 的子路由如 /app/user 是无真实文件的,必须由 index.html 响应并交由前端 router 处理:
- 在对应 location 块中添加:
try_files $uri $uri/ /app/index.html; - 注意结尾路径要与二级目录一致:
如果是/admin/,就写/admin/index.html;不能写成/index.html,否则会跳到根目录 -
$uri/必须保留:它触发index指令,确保/app/这类带斜杠的请求也能加载首页
确保 index.html 存在且权限正确
index 指令不会报错提示文件缺失,而是静默返回 403 或 404,排查时容易忽略:
- 确认
index.html确实存在于你配置的物理路径下(比如/var/www/my-spa/index.html) - 检查 Nginx 工作进程(如
www-data)对该文件及所在目录有读(r)和执行(x)权限
目录缺x权限会导致无法进入,即使文件存在也打不开 - Linux 区分大小写,确保文件名是全小写的
index.html,不是Index.html或INDEX.HTM
验证配置是否生效
改完配置别忘了重载,然后做两件事验证:
- 访问
http://your-domain/app/→ 应返回index.html内容(状态码 200) - 访问
http://your-domain/app/nonexistent-path→ 也应返回index.html(而非 404),且浏览器地址栏保持原路径不变 - 打开开发者工具 → Network 标签,看响应内容是否为
index.html的 HTML 源码,Content-Type 是否为text/html











