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

Question

我们正在建设电子商务平台，前端使用vue，我们决定遵循vue团队的建议，并使用vue-cli启动新项目。

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

最奇怪的就是，浏览器似乎会缓存我们的代码，尽管有新的哈希值。

是否有人遇到过类似的问题？有任何解决方案吗？

- BigKamil5

---

在主HTML文件中跟踪JS文件的链接 - 哈希是否已更新？您客户端的链接是否也有更新的哈希值？ - Kamil Kiełczewski

我也遇到了同样的问题，只有在重新加载浏览器、关闭当前标签页并打开新的浏览器标签页时才会更新到新版本。 - chans

有人有解决这个问题的方法吗？ - goodnesskay

你的应用程序是否配置为PWA？我敢打赌这是一个与服务工作器离线缓存相关的问题。 - vhoyer

无论如何，如果您在使用中遇到问题，请前往（Chrome）开发工具>应用程序>服务工作者>[ ]绕过网络，勾选该框，进行部署并重新加载页面，这应该可以解决问题。 - vhoyer

Answer 1

假设这与服务工作者/PWA无关，解决方案可以通过让服务器每次返回Vue应用程序的当前版本来实现前端版本。

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

- bragboy

Answer 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>

- ssten