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

【问题标题】：Vue-cli production build - browser cache problem?Vue-cli生产构建-浏览器缓存问题？
【发布时间】：2020-02-24 12:39:40
【问题描述】：

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

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

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

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

【问题讨论】：

在主 html 文件中跟踪 js 文件的链接 - 哈希值是否已更新？您客户的链接也更新了哈希值？
我也遇到了同样的问题，只有当你重新加载浏览器而不是刷新，或者关闭当前标签并打开新的浏览器标签时，它才会更新到新版本。
有人能解决这个问题吗？
您的应用是否配置为 PWA？我敢打赌这是与服务工作者离线缓存有关的问题
无论如何，如果您对此有疑问，请查看 serviceworker 是否存在问题，请转到 (chrome) devtools > Application > Service Workers > [ ] Bypass for network，选中该框，进行部署并重新加载页面，这应该可以解决问题

标签： vue.js nginx webpack caching vue-cli

【解决方案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

【讨论】：

【解决方案2】：

一个可能的问题是浏览器正在缓存index.html 文件。

尝试像这样禁用index.html 的缓存：

<meta http-equiv="cache-control" content="max-age=0" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
<meta http-equiv="pragma" content="no-cache" />

或者，如果您使用的是 .htaccess 文件，请将此代码添加到文件底部：

<Files index.html>
FileETag None
Header unset ETag
Header set Cache-Control "max-age=0, no-cache, no-store, must-revalidate"
Header set Pragma "no-cache"
Header set Expires "Wed, 11 Jan 1984 05:00:00 GMT"
</Files>

【讨论】：