我们正在构建电子商务,在前端使用vue,我们决定最好遵循vue团队的建议,并使用vue cli启动新项目。
当我们试图向客户交付新版本时,问题就出现了。我们正在构建新的应用程序,在dist/文件夹中出现新文件,名称中有新的哈希。。。aaanddd客户端仍然有旧版本。
这实际上是最奇怪的部分,浏览器在某种程度上缓存了我们的代码,尽管有新的哈希O.O
有人有类似的问题吗?有没有办法解决这个问题?
假设这与Service Worker/PWA无关,该解决方案可以通过让服务器每次返回Vue应用的当前版本来返回前端版本来实现。
axioconfig。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
一个可能的问题可能是浏览器正在缓存索引。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>