vue项目强制清除页面缓存
异常描述：
支付宝中内嵌h5项目（vue框架开发），前端重新打包上传之后访问页面会导致页面空白、页面tab点击异常之类异常情况，需要手动清除支付宝缓存才可以正常访问。
解决方案：
在HTTP协议中，只有后端返回 expires 或 Cache-Control:max-age=XXX， 前端才缓存。
但在浏览器中，默认会对 html css js 等静态文件、以及重定向进行缓存，如果在HEAD头中指定：
<HEAD>
<METAHTTP-EQUIV="Pragma"CONTENT="no-cache">
<METAHTTP-EQUIV="Cache-Control"CONTENT="no-cache">
<METAHTTP-EQUIV="Expires"CONTENT="0">
</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;
13 uwsgi_pass example-be;
14 }
# 前端静态文件
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项目强制清除页面缓存的更多相关文章
- asp.net清除页面缓存防止同时登录
//清除页面缓存,防止页面回退重复提交数据 在页面里做以下设置就可以使页面的缓存失效,每次都需要获取新页面. Response.Cache.SetCacheability(System.Web.Htt ...
- ASP.NET几种清除页面缓存的方法
在asp.net中使用模式dialog时,你会发现每次打开的页面都是相同的内容,页面内容并没有刷新,这是缓存的原因造成的, 解决方法如下: 第一种是ASP.NET清除页面缓存 Response.Buf ...
- HTML页面每次打开的时候都清除页面缓存
解决办法为: (1) 用HTML标签设置HTTP头信息 <HEAD> <META HTTP-EQUIV="Pragma" CONTENT="no- ...
- vue项目刷新当前页面
场景: 有时候我们在vue项目页面做了一些操作,需要刷新一下页面. 解决的办法及遇到的问题: this.$router.go(0).这种方法虽然代码很少,只有一行,但是体验很差.页面会一瞬间的白屏,体 ...
- 前端Vue项目——首页/课程页面开发及Axios请求
一.首页轮播图 1.elementUI走马灯 elementUI中 Carousel 走马灯,可以在有限空间内,循环播放同一类型的图片.文字等内容. 这里使用指示器样式,可以将指示器的显示位置设置在容 ...
- IDEA强制清除Maven缓存
目录 重新导入依赖的常见方式 存在的问题 彻底清除IDEA缓存的方式 重新导入依赖的常见方式 下面图中的刷新按钮,在我的机器上,并不能每次都正确导入pom.xml中写的依赖项,而是导入之前pom.xm ...
- vue项目，子页面刷新404问题
翻车事故分析: 因需对项目整体优化,调整过程,采用了路由的history模式,本地项目运行,刷新子页面都是OK的. 部署到测试服务器,正常跳转都ok,但刷新子页面就会出现404,请求变成了get,没有 ...
- (转)vue项目刷新当前页面
场景: 有时候我们在vue项目页面做了一些操作,需要刷新一下页面. 解决的办法及遇到的问题: this.$router.go(0).这种方法虽然代码很少,只有一行,但是体验很差.页面会一瞬间的白屏,体 ...
- vue-cli搭建vue项目（单页面应用）
1.全局安装vue-cli 2.创建项目: vue init webpack test test是项目名称,会在当前工作目录下新建一个test文件夹 接下来会手动选择一些配置 除了Setup unit ...
随机推荐
- 《DSP using MATLAB》Problem 7.10
代码: %% ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ %% Output In ...
- python------SocketServer (0809)
socket(一对一) 与socketserver 一.socketserver 1. 正式定义:The socketserver module simplifies the task of writ ...
- laravel的filter()方法的使用 (方法使用给定的回调函数过滤集合的内容，只留下那些通过给定真实测试的内容)
filter 方法使用给定的回调函数过滤集合的内容,只留下那些通过给定真实测试的内容: $collection = collect([1, 2, 3, 4]); $filtered = $collec ...
- 二十一、springcloud(七)服务网关zuul
1.简介 Eureka用于服务的注册于发现,Feign支持服务的调用以及均衡负载,Hystrix处理服务的熔断防止故障扩散,Spring Cloud Config服务集群配置中心,在微服务架构中,后端 ...
- Excel技巧--单列变多行
当上图的单列转变成多行时,可以这么做: 1.在第一行输入A2.A3,向右拖拉第一行: 2.第二行按第一行最右顺序,写下A12,再向右拖拉出第二行: 3.选择这两行,再拖拉出一串连续顺序的多行来: 4. ...
- C++类中this指针的理解
先要理解class的意思.class应该理解为一种类型,象int,char一样,是用户自定义的类型.用这个类型可以来声明一个变量,比如int x, myclass my等等.这样就像变量x具有int类 ...
- Python的xml模块
先来一段xml代码 <?xml version="1.0"?> <data> <country name="Liechtenstein&qu ...
- python数据格式化之pprint
python数据格式化之pprint 2017年06月17日 13:56:33 阅读数:2291 简介 pprint模块 提供了打印出任何Python数据结构类和方法. 模块方法: 1.class p ...
- shell脚本（二）
shell脚本(二)——变量 一．定义:用来存放各种数据,编程语言组成部分 变量的命名规则: 变量名由数字 字母下划线组成 必须以字母或者下划线开头 不能使用shell里面的关键词 ...
- wepy 小程序云开发
小程序前段时间更新了云开发的功能,刚听到对时候觉得简直是个人开发者对福音,尤其是对我这样对后端不是很懂对前端傻傻,简直不能太方便,就试了下. 体验二维码: 源码:https://github.com/ ...