Vue WebApp 如何强制客户端浏览器加载最新部署版本？

问题关联说明 #

你提到的Bootstrap-Vue和当前缓存问题没有关联，该问题本质是前端静态资源的浏览器缓存策略配置问题，以下是可直接落地的解决方案：

• 针对应用入口文件（通常是index.html）配置强制不缓存的响应头：Cache-Control: no-cache, no-store, must-revalidate，该配置会让浏览器每次请求入口文件时都向服务端校验是否有更新，不会在本地缓存入口文件
• 其他带内容哈希后缀的静态资源（js、css、图片等）配置长缓存即可：Cache-Control: public, max-age=31536000, immutable，Vue打包时会自动给这类资源的文件名加上对应内容的哈希值，只要内容变更哈希就会更新，天然不会出现旧缓存问题
• 如果你在Docker容器内使用Nginx作为静态资源服务，可以直接在Nginx配置中添加如下规则：

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

location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
    add_header Cache-Control "public, max-age=31536000, immutable";
    expires 1y;
}

如果需要自定义校验时机（比如每2小时校验、每次路由切换校验），可以主动加版本检测逻辑：

• 打包时在项目public目录下生成version.json文件，内容包含当前版本号、打包时间戳，每次部署都会自动更新该文件的内容
• 前端添加版本校验逻辑，对比服务端最新版本和本地存储的历史版本，存在差异时提示用户刷新或者强制刷新
  参考实现代码：

// 版本校验逻辑
async function checkAppUpdate() {
  // 加时间戳避免缓存version.json本身
  const latestVer = await fetch('/version.json?t=' + Date.now()).then(res => res.json())
  const localVer = localStorage.getItem('app_version')

  if (!localVer || latestVer.ver !== localVer) {
    localStorage.setItem('app_version', latestVer.ver)
    // 可替换为自定义UI提示
    if (confirm('应用已发布新版本，是否立即刷新加载？')) {
      location.reload(true)
    }
  }
}

// 页面加载时立即校验
window.addEventListener('load', checkAppUpdate)
// 每2小时定时校验
setInterval(checkAppUpdate, 2 * 60 * 60 * 1000)

• 打包Docker镜像时确保所有静态资源、配置文件都是最新生成的，避免旧镜像层缓存导致打包的资源版本错误
• 如果使用CDN加速静态资源，需要同步调整CDN的缓存规则，和上述HTTP缓存头配置保持一致，避免CDN侧缓存旧的入口文件

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