Angular 13部署至Nginx后，需手动清缓存才能看到新更新

核心问题在于：你已经通过outputHashing=all让静态资源（JS/CSS/图片等）的文件名带上了唯一哈希，这些资源本身不会被误缓存，但入口文件index.html被Nginx或浏览器缓存了——旧的index.html依然指向旧的静态资源哈希，所以用户看不到更新。

以下是针对性的Nginx配置方案，直接复制替换或添加到你的服务器配置中即可：

server {
    listen 80;
    server_name 你的域名或IP;

    # 指向Angular构建后的dist目录
    root /usr/share/nginx/html/your-angular-project;
    index index.html;

    # 强制禁止缓存入口index.html，确保每次请求都拉取最新版本
    location = /index.html {
        expires -1;
        add_header Cache-Control "no-store, no-cache, must-revalidate, proxy-revalidate";
        add_header Pragma "no-cache";
        add_header Expires "0";
    }

    # 对带哈希的静态资源设置长期缓存（因为文件名变了就代表内容更新）
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
        access_log off; # 可选，减少不必要的日志输出
    }

    # 处理Angular单页路由，避免刷新页面出现404
    location / {
        try_files $uri $uri/ /index.html;
    }
}

配置说明 #

1. location = /index.html：精准匹配入口文件，通过响应头强制浏览器不缓存该文件，确保每次打开页面都会获取最新的index.html，从而加载新的静态资源。
2. 静态资源规则：所有带哈希的静态资源可以安全设置1年缓存，因为只要内容更新，文件名的哈希就会变化，浏览器会自动请求新文件。
3. 路由重写：解决Angular单页应用刷新页面时的404问题，把所有路由请求转发到index.html。

后续检查步骤 #

• 修改配置后执行sudo nginx -s reload让配置生效。
• 打开浏览器开发者工具的Network面板，刷新页面查看：
  • index.html的响应头是否包含Cache-Control: no-store, no-cache...
  • 静态资源（如main.xxxxxx.js）的响应头是否有Cache-Control: public, immutable和Expires字段
• 再次确认angular.json中outputHashing确实在生产环境设置为"all"：

  "architect": {
    "build": {
      "configurations": {
        "production": {
          "outputHashing": "all"
        }
      }
    }
  }
  

之前添加的HTML meta缓存标签优先级低于Nginx返回的响应头，所以主要靠Nginx配置控制缓存即可。

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