Vue-CLI生产版本-浏览器缓存问题?

时间:2019-10-29 09:31:44

标签: vue.js nginx caching vue-cli

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

当我们尝试向客户提供新版本时,就会出现我们的问题。我们正在构建新的应用程序,出现在dist /文件夹中的新文件,名称中带有新的散列... aaanddd客户端仍具有旧版本。

这实际上是最奇怪的部分,尽管存在新的哈希值,但浏览器仍在某种程度上缓存我们的代码

有人有类似的问题吗?还有解决这个问题的主意吗?

2 个答案:

答案 0 :(得分:1)

假设服务工作者/ 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

答案 1 :(得分:1)

可能的问题可能是浏览器正在缓存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>