已通过Grunt添加文件版本号，浏览器仍不加载最新代码？

老哥，你遇到的这个问题我太熟了——虽然给JS/CSS加了哈希版本号，但核心问题出在HTML文件本身被浏览器缓存住了！浏览器会先加载缓存里的旧HTML，而旧HTML里引用的还是旧版本的资源文件名，自然不会去请求新的带哈希的JS/CSS。下面给你几个永久解决方案，按靠谱程度排序：

1. 服务器端配置HTML的缓存策略（最推荐） #

这是最根本的解决办法：给HTML文件设置短有效期的缓存规则，既不会完全禁用缓存影响性能，又能让浏览器很快获取到最新的HTML内容。

不同服务器的配置示例： #

• Nginx：在配置文件里添加以下规则

  location ~* \.html$ {
      expires 10m;  # 设置10分钟过期，可根据需求调整
      add_header Cache-Control "public, max-age=600";  # 600秒=10分钟
  }
  

• Apache：在.htaccess文件中添加

  <FilesMatch "\.html$">
      Header set Cache-Control "max-age=600, public"
  </FilesMatch>
  

配置后，浏览器会在10分钟后自动请求新的HTML；如果用户着急，刷新一次也能拿到最新内容，不需要手动清缓存。

2. 给HTML文件也添加哈希版本号 #

如果你的项目架构允许，可以像JS/CSS一样给HTML文件名加哈希（比如index.7a3f2d.html），然后通过服务器重写规则映射到实际的HTML文件。

步骤： #

• 用Grunt插件（比如grunt-rev）给HTML文件生成哈希文件名
• 在服务器配置重写规则，比如Nginx：

  rewrite ^/index\..*\.html$ /index.html last;
  

这样用户访问带哈希的HTML时，服务器会返回最新的内容；同时要注意更新项目内部的导航链接（比如首页跳转要指向带哈希的HTML）。

3. HTML内添加缓存控制Meta标签（应急方案） #

这个方法不如服务器端配置可靠，但可以作为补充：在HTML的<head>里添加以下标签，告诉浏览器不要缓存当前页面：

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">

注意：部分浏览器可能不会严格遵守这些Meta标签，所以还是优先用服务器端配置。

验证缓存是否生效 #

你可以用浏览器开发者工具的Network面板，找到HTML文件的请求，查看Response Headers里的Cache-Control和Expires字段，确认是不是和你配置的一致。如果之前的HTML被设置了很长的过期时间（比如几个月），那浏览器自然不会主动请求新的HTML。

总结一下：配合你已有的JS/CSS哈希策略，只要搞定HTML的缓存问题，用户就能自动拿到最新内容，再也不用手动清缓存啦！

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