异常描述：

支付宝中内嵌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项目强制清除页面缓存的更多相关文章

  1. asp.net清除页面缓存防止同时登录

    //清除页面缓存,防止页面回退重复提交数据 在页面里做以下设置就可以使页面的缓存失效,每次都需要获取新页面. Response.Cache.SetCacheability(System.Web.Htt ...

  2. ASP.NET几种清除页面缓存的方法

    在asp.net中使用模式dialog时,你会发现每次打开的页面都是相同的内容,页面内容并没有刷新,这是缓存的原因造成的, 解决方法如下: 第一种是ASP.NET清除页面缓存 Response.Buf ...

  3. HTML页面每次打开的时候都清除页面缓存

    解决办法为: (1) 用HTML标签设置HTTP头信息 <HEAD> <META    HTTP-EQUIV="Pragma" CONTENT="no- ...

  4. vue项目刷新当前页面

    场景: 有时候我们在vue项目页面做了一些操作,需要刷新一下页面. 解决的办法及遇到的问题: this.$router.go(0).这种方法虽然代码很少,只有一行,但是体验很差.页面会一瞬间的白屏,体 ...

  5. 前端Vue项目——首页/课程页面开发及Axios请求

    一.首页轮播图 1.elementUI走马灯 elementUI中 Carousel 走马灯,可以在有限空间内,循环播放同一类型的图片.文字等内容. 这里使用指示器样式,可以将指示器的显示位置设置在容 ...

  6. IDEA强制清除Maven缓存

    目录 重新导入依赖的常见方式 存在的问题 彻底清除IDEA缓存的方式 重新导入依赖的常见方式 下面图中的刷新按钮,在我的机器上,并不能每次都正确导入pom.xml中写的依赖项,而是导入之前pom.xm ...

  7. vue项目，子页面刷新404问题

    翻车事故分析: 因需对项目整体优化,调整过程,采用了路由的history模式,本地项目运行,刷新子页面都是OK的. 部署到测试服务器,正常跳转都ok,但刷新子页面就会出现404,请求变成了get,没有 ...

  8. (转)vue项目刷新当前页面

    场景: 有时候我们在vue项目页面做了一些操作,需要刷新一下页面. 解决的办法及遇到的问题: this.$router.go(0).这种方法虽然代码很少,只有一行,但是体验很差.页面会一瞬间的白屏,体 ...

  9. vue-cli搭建vue项目（单页面应用）

    1.全局安装vue-cli 2.创建项目: vue init webpack test test是项目名称,会在当前工作目录下新建一个test文件夹 接下来会手动选择一些配置 除了Setup unit ...

随机推荐

  1. PythonStudy——第一阶段性测试

    1.Python解释器,在2.x和3.x上分别采用的是什么默认编码8 2.定义字符串变量时,单引号,双引号,三引号什么区别? 3.编程语言可以分为哪三类,特点都是什么 4.定义一个变量有三个特性, 5 ...

  2. CNN+BLSTM+CTC的验证码识别从训练到部署

    项目地址:https://github.com/kerlomz/captcha_trainer 1. 前言 本项目适用于Python3.6,GPU>=NVIDIA GTX1050Ti,原mast ...

  3. zabbix图形化界面乱码（二）

      中文字体乱码,解决办法:   1:从Windos下拷贝字体到服务器,C:\Windows\Fonts,有很多,看着喜欢的拷贝   2:然后在zabbix 服务端,进入到zabbix web的工作目 ...

  4. 使用phpAnalysis打造PHP应用非侵入式性能分析器

    使用phpAnalysis打造PHP应用非侵入式性能分析器,查找PHP性能瓶颈. 什么是phpAnalysis phpAnalysis是一款轻量级非侵入式PHP应用性能分析器,适用于开发.测试及生产环 ...

  5. mongodb与mysql命令详细对比

    传统的关系数据库一般由数据库(database).表(table).记录(record)三个层次概念组成,MongoDB是由数据库(database).集合(collection).文档对象(docu ...

  6. JAVA AES CBC 加密 解密

    AES 256 , KEY 的长度为 32字节(32*8=256bit). AES 128 , KEY 的长度为 16字节(16*8=128bit) CBC 模式需要IV, IV的值是固定写死,还是当 ...

  7. 使用IDE之webstorm

    最近打算试试用webstorm,今天从vscode换成了webstorm. 官方下载webstorm 1.下载之后安装,我全部选择默认,因为webstorm是付费ide,到启动面板时,选择激活选项. ...

  8. ros有一个比较安全的登录方案：二次登录防火墙

    原文: https://www.winbox.org/ /ip firewall address-list add address=10.0.0.0/8 list=login /ip firewall ...

  9. c# 字典

    字典 在System.Collections.Generic下, 对应HashTable,添加了泛型的特性,性能更高跟安全 在内存中是散列排布的,存储也是键值对 Dictionary<键的数据类 ...

  10. Node学习笔记（三）

    1.EventEmitter常用的API EventEmitter.on(event, listener) 为指定事件注册一个监听器,接受一个字符串 event 和一个回调函数 listener. E ...