Angular 8子目录部署后页面刷新/导航404问题及Nginx配置修复

问题原因 #

Angular是单页应用（SPA），前端路由逻辑由浏览器端JS处理。首次加载example.com/subfolder/时，Nginx返回根文件index.html，之后的页面跳转都是前端JS在浏览器内部完成，不会触发新的服务器请求。但刷新页面或直接在地址栏输入example.com/subfolder/param1/param2时，浏览器会直接向Nginx发起GET请求，Nginx会误以为要访问/home/username/subfolder/dist/angular-project-name/param1/param2这个物理文件/目录，而该路径实际不存在，因此返回404错误。

解决方法：修改Nginx配置 #

需要在/subfolder/的location块中添加try_files指令，让Nginx在找不到对应物理文件时，返回Angular的index.html，交由前端路由处理请求。修改后的完整配置如下：

server {
   listen 80 default_server;
   listen [::]:80 default_server;
   root /home/username/;
   server_name www.example.com example.com;
   index index.html index.htm;

   location /subfolder/ {
      alias /home/username/subfolder/dist/angular-project-name/;
      # 核心配置：优先匹配物理文件，无匹配则返回index.html由前端路由处理
      try_files $uri $uri/ /subfolder/index.html;
   }

   location /subfolder/api/ {
      proxy_pass http://www.example.com:8080/api/;
      # ... 保留原有代理配置
   }
}

关键配置说明 #

• try_files $uri $uri/ /subfolder/index.html：
  1. $uri：尝试访问请求路径对应的物理文件
  2. $uri/：尝试访问请求路径对应的目录
  3. /subfolder/index.html：如果前两项都匹配失败，返回Angular的入口文件，由前端路由解析请求路径

注意：最后一个参数必须写完整的/subfolder/index.html，不能简写为index.html，因为Nginx需要基于站点根目录定位到正确的入口文件位置。

内容的提问来源于stack exchange，提问作者Kissenger