Vue-cli 生产构建 - 浏览器缓存问题？

Question

我们正在构建电子商务，我们在前面使用 vue，我们认为最好遵循 vue 团队的建议，并使用 vue-cli 启动新项目。

当我们尝试向客户交付新版本时，就会出现我们的问题。我们正在构建新的应用程序，出现在 dist/ 文件夹中的新文件，名称中有新的哈希值...... aaanddd 客户端仍然有旧版本。

这实际上是最奇怪的部分，该浏览器以某种方式缓存我们的代码，尽管有新的哈希值 Oo

有没有人有类似的问题？知道如何解决这个问题吗？

Answer 1

假设这与 Service Worker/PWA 无关，则可以通过让服务器每次返回 Vue App 的当前版本来返回前端版本来实现解决方案。

axiosConfig.js

axios.interceptors.response.use(
  (resp) => {
    let fe_version = resp.headers['fe-version'] || 'default'
    if(fe_version !== localStorage.getItem('fe-version') && resp.config.method == 'get'){
      localStorage.setItem('fe-version', fe_version)
      window.location.reload() // For new version, simply reload on any get
    }
    return Promise.resolve(resp)
  },
)

完整文章：https://blog.francium.tech/vue-js-cache-not-getting-cleared-in-production-on-deploy-656fcc5a85fe