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 ...
随机推荐
- ubuntu拒绝root用户ssh远程登录解决办法
ubuntu拒绝root ssh远程登录通常情况是ssh设置了禁止root远程登录,解决办法就是:修改ssh配置,然后重启ssh服务即可. vi /etc/ssh/sshd_config 找到并用#注 ...
- 2.3 Visio画虚线后插入word或PPT变为实线
选中实线后,左键选择->格式->线条->粗细->自定义->设置为0pt
- python学习路程1
常用的转义字符还有: \n 表示换行 \t 表示一个制表符 \\ 表示 \ 字符本身 任务 请将下面两行内容用Python的字符串表示并打印出来: Python was started in 1989 ...
- 收藏Dotnetbar的官方学习链接
Archive for the DotNetBar for Windows Forms Category: http://www.devcomponents.com/kb2/?cat=3 视频教程: ...
- 2.STM32启动文件
一.概念声明 中断向量:由硬件产生的中断标识码,一般用于存放中断服务程序的跳转指令.根据硬件产生的中断号查找中断向量表来确定对应的中断向量.CM3内核有15个异常 和240个中断源. 程序的内 ...
- 使用 tag 文件定义自定义标签
----------------------------------------------------------------------- 在jsp文件中,可以引用tag和tld文件. 1.对于t ...
- List接口、Set接口和Map接口
1.List和Set接口继承自Collection接口,而Map不是继承的Collection接口 Map没有继承Collection接口,Map提供key到value的映射;一个Map中不能包含相同 ...
- js开发相关
获取url中的参数 (function ($) { $.getUrlParam = function (name) { var reg = new RegExp("(^|&)&quo ...
- 200. Spring Boot JNDI：在Tomcat中怎么玩JNDI?
[视频&交流平台] àSpringBoot视频:http://t.cn/R3QepWG à SpringCloud视频:http://t.cn/R3QeRZc à Spring Boot源 ...
- gentoo emacs 中文输入法 呼出
最近在另外一台电脑上面安装 gentoo和 emacs,但是碰到奇怪的问题,在旧电脑上面,可以使用 ctrl + space 呼出输入法,而新电脑只能触发 复制功能. 经过在网上查找和两台电脑之间的对 ...