异常描述：

支付宝中内嵌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# 后台apilocation ~ ^/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 htmladd_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项目打包后存在浏览器缓存问题

在入口文件index.html添加

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="expires" content="0">

因浏览器缓存原因导致vue 打包后的文件不能即使更新最新代码。缓存里的内容没有清除。（基本没作用）

解决办法:

就是在打包的文件名中添加一个版本号以便浏览器能区分。(相当于是一个哈希值)
首先在src根目录下新创建一个vue.config.js文件

const Timestamp = new Date().getTime();
module.exports = {publicPath:"/vue_dingdong/",configureWebpack: { // webpack 配置output: { // 输出重构  打包编译后的 文件名称  【模块名称.版本号.时间戳】filename: `js/[name].${process.env.VUE_APP_Version}.${Timestamp}.js`,chunkFilename: `js/[name].${process.env.VUE_APP_Version}.${Timestamp}.js`},},
}

这样每次打包出来的js文件的命名都不一样，也就解决了浏览器的缓存问题。

vue项目强制清除页面缓存相关推荐

vue 删除页面缓存_vue项目强制清除页面缓存的例子
异常描述: 支付宝中内嵌h5项目(vue框架开发),前端重新打包上传之后访问页面会导致页面空白.页面tab点击异常之类异常情况,需要手动清除支付宝缓存才可以正常访问. 解决方案: 在HTTP协议中,只 ...
vue项目强制刷新页面
下面所写代码对应场景比较少见,首页在登录与不登录时展示的样子不一样,当牵扯的内容过多时,选择了双重判别进行强制刷新. <script> import { defineComponent } ...
java 强制清除缓存_IDEA强制清除Maven缓存的方法示例
重新导入依赖的常见方式下面图中的刷新按钮,在我的机器上,并不能每次都正确导入pom.xml中写的依赖项,而是导入之前pom.xml的依赖(读了缓存中的pom.xml). 当然除了这些,还可以下面这样 ...
vue项目某个APP页面实现手机物理按键返回、路由拦截、localStorage存取参数
vue项目某个APP页面实现手机物理按键返回.路由拦截.localStorage存取参数最近做个功能:在web系统里面嵌套两个app页面,当然APP页面在web系统上没有路由跳转,而是从另外系统扫码 ...
vue项目keepAlive保持页面状态（详情页返回列表页不刷新）
vue项目keepAlive保持页面状态(详情页返回列表页不刷新) 在vue项目中,存在从列表页跳转到详情页查看,而后又返回列表页的操作时,如果列表过长,我们往往希望从详情页返回列表页时,列表页能留在 ...
ASP.NET清除页面缓存的方法
ASP.NET清除页面缓存 (1) Response.Buffer = true; Response.ExpiresAbsolute = System.DateTime. ...
怎么改vue项目的标题_如何动态修改Vue项目中的页面title
前言:在项目中,我们有时候需要修改Vue项目中的页面title. 方法有两种,①如果需要动态设置页面的title,可以直接使用document.title:②可以使用router的beforeEach ...
解决vue项目在ie浏览器缓存问题。
解决vue项目在ie浏览器缓存问题. 参考文章: (1)解决vue项目在ie浏览器缓存问题. (2)https://www.cnblogs.com/jiangweichao/p/11255451.ht ...
vue项目微信端清理缓存问题解决
vue项目微信端清理缓存问题解决参考文章: (1)vue项目微信端清理缓存问题解决 (2)http://www.cnblogs.com/sakura-lifangfang/p/9660550.htm ...
如何有效清除页面缓存
使用以下方法,可以清除用户的页面缓存,甚至是小程序里webview页面,类似牛皮鲜一样的顽固缓存亦可清除掉. 只需复制以下代码,写到最顶部的script即可,见效快且不影响使用.可以有效清除页面缓存. ...

vue项目强制清除页面缓存

vue项目强制清除页面缓存

异常描述：

解决方案：

我的最终解决方案是：

前端静态文件

vue项目打包后存在浏览器缓存问题

在入口文件index.html添加

解决办法:

vue项目强制清除页面缓存相关推荐

最新文章

热门文章