Vue中入口缓存的问题怎么改良

发布时间:2021-08-24 15:20:56 作者:chen
来源:亿速云 阅读:334

本篇内容主要讲解“Vue中入口缓存的问题怎么改良”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Vue中入口缓存的问题怎么改良”吧!

在开发时候经常遇到一个问题,我们根据版本号去控制缓存问题,当我们发布新版本,使用心得版本号的时候,发现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文件里面引用的依然是旧的cssjs文件

一旦我们使用了全量更新,也就是每次发版本之前会干掉之前的jscss文件,那么index.html会无法加载之前的jscss还有一些其他的静态资源文件,而新的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浏览器不缓存,刷新页面需要重新下载页

到此,相信大家对“Vue中入口缓存的问题怎么改良”有了更深的了解,不妨来实际操作一番吧!这里是亿速云网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

推荐阅读:
  1. vue中keep-alive,include的缓存问题
  2. 如何解决微信浏览器缓存站点入口文件的问题

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

vue

上一篇:JAVA和SQL中的null与NULL的对比

下一篇:HTTP缓存机制的原理

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》