网创优客建站品牌官网
为成都网站建设公司企业提供高品质网站建设
热线:028-86922220
成都专业网站建设公司

定制建站费用3500元

符合中小企业对网站设计、功能常规化式的企业展示型网站建设

成都品牌网站建设

品牌网站建设费用6000元

本套餐主要针对企业品牌型网站、中高端设计、前端互动体验...

成都商城网站建设

商城网站建设费用8000元

商城网站建设因基本功能的需求不同费用上面也有很大的差别...

成都微信网站建设

手机微信网站建站3000元

手机微信网站开发、微信官网、微信商城网站...

建站知识

当前位置:首页 > 建站知识

怎么在vue项目中强制清除页面缓存

今天就跟大家聊聊有关怎么在vue项目中强制清除页面缓存,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。

创新互联专注于华安网站建设服务及定制,我们拥有丰富的企业做网站经验。 热诚为您提供华安营销型网站建设,华安网站制作、华安网页设计、华安网站官网定制、微信小程序开发服务,打造华安网络公司原创品牌,更为您提供华安网站排名全网营销落地服务。

解决方案:

在HTTP协议中,只有后端返回 expires 或 Cache-Control:max-age=XXX, 前端才缓存。

但在浏览器中,默认会对 html css js 等静态文件、以及重定向进行缓存,如果在HEAD头中指定:





浏览器不会缓存html,但是还是会对重定向缓存,并且这种方式并不规范,可能有的浏览器不支持。

我的最终解决方案是:

1) 对hash过的静态文件还是采用默认方式,客户端会缓存。

2)对html文件,返回时增加头:Cache-Control,必须每次来服务端校验,根据etag返回200或者304

对应的nginx配置如下:

upstream example-be {
  ip_hash;
  server unix:/run/example-be.sock;
}
server{
  listen 80; #监听端口
  server_name example.com

  # 后台api
  location ~ ^/api {
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    include uwsgi_params;
    uwsgi_pass example-be;
  }

  # 前端静态文件
  location ~* \.(gif|jpg|jpeg|png|css|js|ico|eot|otf|fon|font|ttf|ttc|woff|woff2)$ {
    root /var/www/example-fe/dist/;
  }

  # 前端html文件
  location / {
    # disable cache html
    add_header Cache-Control 'no-cache, must-revalidate, proxy-revalidate, max-age=0';

    root /var/www/example-fe/dist/;
    index index.html index.htm;
    try_files $uri /index.html;
  }
}

由于浏览器缓存静态文件的时间不可控,我们可以在nginx上自己配置expires 1M(1个月)

# 前端静态文件

location ~* \.(gif|jpg|jpeg|png|css|js|ico|eot|otf|fon|font|ttf|ttc|woff|woff2)$ {
   root /var/www/example-fe/dist/;
   expires 1M;
   add_header Cache-Control "public";
 }

看完上述内容,你们对怎么在vue项目中强制清除页面缓存有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注创新互联行业资讯频道,感谢大家的支持。


网页名称:怎么在vue项目中强制清除页面缓存
文章起源:http://bjjierui.cn/article/jgddde.html

其他资讯