Vue 入口缓存的问题

邱秋7月前 23:28

关于web的缓存策略,推荐这篇文章:Http缓存机制

在开发时候经常遇到一个问题,我们根据版本号去控制缓存问题,当我们发布新版本,使用心得版本号的时候,发现html里面引用的版本号却是旧的版本号 ,原来是该html文件被缓存了,很多时候我们设置禁止html文件被缓存,但依然会出现被缓存的情况。

<meta http-equiv="Expires" content="0">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-control" content="no-cache">
<meta http-equiv="Cache" content="no-cache">

为什么我们有时候设置了<meta http-equiv="Cache-control" content="no-store">这种强制性禁止缓存,我们的页面依然被缓存了?

因为我们只关注了客户端,却忽略了服务器端的设置,如果服务器端nginx设置了Cache-control,他是会覆盖掉我们页面中设置的的Cache-control的,所以有时候我们会发现明明cssjs已经加了版本号,但是html文件里面引用的依然是旧的css和js文件

一旦我们使用了全量更新,也就是每次发版本之前会干掉之前的js和css文件,那么index.html会无法加载之前的js,css还有一些其他的静态资源文件,,而新的jscss则不会被加载, 那么白屏就诞生了.

因为服务器的缓存机制,旧的cssjs并不会被立即删除,这种情况下, 需要配合服务器来设置缓存,以nginx为例

location / {
        root /home/www/test/dist;
        index index.html;
        try_files $uri $uri/ /index.html;
        add_header Last-Modified $date_gmt;
        add_header Cache-Control 'no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0';
        if_modified_since off;
        expires off;
        etag off;
    }

no-cache,no-store可以只设置一个
no-cache浏览器会缓存,但刷新页面或者重新打开时 会请求服务器,服务器可以响应304,如果文件有改动就会响应200
no-store浏览器不缓存,刷新页面需要重新下载页面

本文于7月前 23:28发布在code分类下,当前已被围观869次

相关标签:vue,nginx,html5,

永久地址:https://www.chuchur.com/article/vue-index-cache

版权声明: 自由转载-署名-非商业性使用

哥哥Mac OSChrome73中国 昆明 联通#55
感谢, 确实是这个问题, 解决了我的大麻烦