如何在静态网站上可靠禁用缓存？

如果你不想再手动更新URL版本号（myFile.js?v=123），以下是几种真正可靠的缓存禁用方法，按优先级排序：

1. 配置服务器/托管平台的HTTP响应头（最推荐） #

HTTP响应头是浏览器缓存策略的最高优先级控制方式，只要服务器正确发送这些头，所有现代浏览器都会遵守。

Nginx 配置示例 #

在你的Nginx站点配置中，针对静态资源添加缓存控制规则：

# 匹配常见静态文件类型（可根据需要扩展）
location ~* \.(js|css|html|svg|png|jpg)$ {
    add_header Cache-Control "no-cache, no-store, must-revalidate";
    add_header Pragma "no-cache";
    add_header Expires 0;
}

Apache 配置示例 #

在网站根目录的.htaccess文件中添加：

<FilesMatch "\.(js|css|html|svg|png|jpg)$">
    Header set Cache-Control "no-cache, no-store, must-revalidate"
    Header set Pragma "no-cache"
    Header set Expires 0
</FilesMatch>

静态托管平台（Netlify/Vercel）配置 #

• Netlify：在项目根目录创建netlify.toml文件：

  [[headers]]
    for = "/*.js"
    [headers.values]
      Cache-Control = "no-cache, no-store, must-revalidate"
      Pragma = "no-cache"
      Expires = "0"
  
  [[headers]]
    for = "/*.css"
    [headers.values]
      Cache-Control = "no-cache, no-store, must-revalidate"
      Pragma = "no-cache"
      Expires = "0"
  

  可复制上述块，修改for字段覆盖其他资源类型。

• Vercel：在项目根目录创建vercel.json文件：

  {
    "headers": [
      {
        "source": "/(.*\\.(js|css|html|svg|png|jpg))",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "no-cache, no-store, must-revalidate"
          },
          {
            "key": "Pragma",
            "value": "no-cache"
          },
          {
            "key": "Expires",
            "value": "0"
          }
        ]
      }
    ]
  }
  

2. 无法修改服务器配置时的替代方案 #

如果完全没有权限调整服务器头，可使用内容哈希文件名的自动化方案替代手动版本号：
借助构建工具（Webpack、Vite、Parcel等），打包时自动根据文件内容生成唯一哈希值作为文件名后缀（比如myFile.abc123.js）。文件内容不变时哈希不变，浏览器会缓存；内容更新后文件名自动变化，浏览器会请求新文件。
这种方式本质是"精准缓存"而非完全禁用，但能避免手动改版本号的麻烦，且比meta标签可靠得多。

为什么HTML meta标签不可靠 #

正如你注意到的，meta http-equiv标签的优先级远低于服务器发送的HTTP响应头，且不同浏览器对这些标签的解析行为不一致，无法保证在所有场景下生效，因此不推荐依赖。

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