为什么会出现这种奇怪的现象？ #

我之前帮好几个开发者排查过类似的问题，核心原因是浏览器对入口HTML文件的缓存策略在搞事情：

• Webpack给JS/CSS加哈希是为了让变更后的资源有全新的文件名，避免浏览器缓存旧资源，但入口的index.html文件通常不会被Webpack添加哈希（VueCLI默认配置里是这样）。
• 当你在当前标签页刷新时，浏览器会发起一个"带条件"的请求，会检查HTML是否有更新；但关闭标签重新打开时，浏览器会直接读取本地缓存的HTML文件——而旧HTML里引用的还是旧哈希的JS/CSS资源，自然就加载了旧版本。
• 大概率你的服务器给HTML文件设置了过长的Cache-Control缓存头，比如max-age=86400甚至更久，让浏览器觉得这个HTML文件可以放心缓存很久。

怎么让所有用户都拿到最新版本？ #

这里有几个递进的解决方案，你可以根据自己的情况选择：

1. 优先调整服务器的HTML缓存策略（最推荐）

直接在服务器端给index.html设置合适的缓存头：

• 设置Cache-Control: no-cache：意思是浏览器可以缓存HTML，但每次使用前必须向服务器验证是否有更新。
• 或者设置Cache-Control: must-revalidate：和上面类似，缓存过期后必须重新验证。
• 绝对不要给HTML设置max-age很长的强缓存，这会让用户长期拿不到新内容。

比如在Nginx里可以这么配置：

location = /index.html {
    add_header Cache-Control "no-cache, must-revalidate";
}

2. 给HTML文件也加上哈希（进阶方案）

修改VueCLI的Webpack配置，让入口HTML文件名也带上哈希。你需要在vue.config.js里配置相关选项：

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  configureWebpack: {
    plugins: [
      new HtmlWebpackPlugin({
        filename: `index.[contenthash].html`,
        template: 'public/index.html'
      })
    ]
  }
}

不过这么做需要配合服务器的路由配置，确保用户访问根路径时能指向最新的HTML文件，比如用服务器的重写规则或者CDN的自动索引功能。

3. 加入版本检测提示（兜底方案）

如果服务器配置不好改，可以在网站里加一个简单的版本检测逻辑：

• 构建时生成一个version.json文件，里面包含当前的版本号或哈希值。
• 页面加载时，异步请求这个文件，和本地localStorage里存储的版本号对比。
• 如果不一致，就弹出提示告诉用户有新版本，引导他们刷新页面（甚至可以自动刷新）。

比如在App.vue的created钩子加这段逻辑：

async created() {
  const res = await fetch('/version.json');
  const latestVersion = await res.json();
  const currentVersion = localStorage.getItem('appVersion');
  
  if (latestVersion.version !== currentVersion) {
    if (confirm('发现新版本，是否刷新页面？')) {
      localStorage.setItem('appVersion', latestVersion.version);
      window.location.reload(true);
    }
  }
}

4. PWA场景：配置Service Worker更新

如果你的项目用了VueCLI的PWA插件，可以修改vue.config.js里的PWA配置，让Service Worker主动检测更新：

module.exports = {
  pwa: {
    workboxOptions: {
      skipWaiting: true,
      clientsClaim: true
    }
  }
}

这样新的Service Worker会立即激活，接管页面，用户下次打开时就能拿到最新内容。

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