Angular 8.x路由搭配Nginx location部署：页面刷新报错求助

云原生阿岚

2026-5-13

解决Angular子路径部署Nginx时刷新页面404的问题

我之前在部署Angular应用到Nginx子路径时也踩过这个一模一样的坑，一眼就看出问题所在了——你的try_files指令里的/index.html路径写错啦！

问题根源

当你用alias把/dashboard映射到/home/user/my-dashboard时，try_files里的/index.html是相对于Nginx的root路径（也就是/home/user/）去查找的，而你的Angular入口文件明明在/home/user/my-dashboard/下面，刷新时自然找不到对应文件。

修正后的Nginx配置

直接把try_files里的/index.html改成/dashboard/index.html就行，修改后的完整配置：

server {
 listen 443 ssl;
 listen [::]:443;
 root /home/user/;
 server_name sub.tld.com;
 ssl_certificate /path...;
 ssl_certificate_key /path...;

 location / {
  proxy_pass http://localhost:10020/;
 }

 location ^~/dashboard {
  alias /home/user/my-dashboard;
  try_files $uri $uri/ /dashboard/index.html; # 这里是关键修改
  index index.html;
 }
}

更稳妥的重写方案（适配多层嵌套路由）

如果你的Angular应用有多层嵌套路由（比如/dashboard/settings/profile），用if+rewrite的方式会更可靠，能确保所有不存在的文件请求都转发到入口文件：

location ^~/dashboard {
 alias /home/user/my-dashboard;
 index index.html;
 # 仅当请求的文件/目录不存在时，重写到入口文件
 if (!-e $request_filename) {
  rewrite ^/dashboard/(.*)$ /dashboard/index.html last;
 }
}