当前位置:首页 > 技术分享 > 正文内容

uniapp开发微信公众号H5时防止页面被缓存的处理 h5 实现强刷,解决项目缓存问题

admin3年前 (2023-02-21)技术分享3104

记录在使用 uni-app 开发公众号应用时防止被缓存的方法

# 背景

修改页面后重新打包,测试人员在确认问题时总是说没改,页面没有变化,需要进行繁琐的清缓存操作才能获取到最新版本。

# 解决方法

确定需要修改的文件,首先我们要看 src/manifest.json 里面定义的 template 字段,根据值找到模板文件。

例如: public/index.html写入禁止缓存的 meta

<!-- 设置 meta 不缓存 -->
<meta http-equiv="Expires" content="0">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-control" content="no-cache">
<meta http-equiv="Cache" content="no-cache">

缓存的文件主要是 css 和 js 两种,所以我们要分别处理。

# 样式缓存处理

我们只需要修改模板文件中引用 css 的地方,在引用 css 文件名的前面加入哈希。类似下面这种方式:

<link  rel="stylesheet"  href="<%= BASE_URL %>static/index.<%= VUE_APP_INDEX_CSS_HASH %>.css"/>

如果已经自带了这个哈希值则不用做这个处理。

# JS 缓存处理

修改入口页面的 js 引用机制,加入时间戳。

具体要在项目根目录下添加一个 vue.config.js 配置,需要你的 APP 是命令行创建的,这样在服务器上打包的时候才可以加载使用。

然后输入如下内容:

if(process.env.UNI_PLATFORM === 'h5'){
	let filePath = 'static/js/'
	let Timestamp = new Date().getTime()
	
	module.exports = {
		// webpack配置
		filenameHashing: false,
		configureWebpack:{
			// webpack配置 解决js缓存的问题
			output:{
				// 输出重构 打包编译后的 文件目录/文件名称?v=时间戳
				filename:`${filePath}[name].js?v=${Timestamp}`,
				chunkFilename:`${filePath}[name].js?v=${Timestamp}`
			}
		}
	}
}else{
	// 其他打包配置
	
	module.exports = {
		// webpack 相关配置
		filenameHashing: false,
	}
}

扫描二维码推送至手机访问。

版权声明:本文由小刚刚技术博客发布,如需转载请注明出处。

本文链接:http://blog.bitefu.net/post/485.html

分享给朋友:

相关文章

超高性比的斐讯盒子T1,刷第三方YYF固件机教程超级详细版

超高性比的斐讯盒子T1,刷第三方YYF固件机教程超级详细版

家里面买了斐讯盒子T1,必不可少的就是刷机,刷机一直爽,一直刷机一直爽,这样的快乐一般人体会不到。原来斐讯盒子N1,T1,还有斐讯K2P路由器也变成了性价比超高的东东,而且众多大神也带来了超多可玩性非常高的固件和破解。楼主今天扒到了相关超高...

centos 配置Let's Encrypt 泛域名https证书

centos 配置Let's Encrypt 泛域名https证书

前言2018年1月份Letsencrypt可以申请泛域名证书,这让我们部署多域名、多站点https省了很多功夫,终于可以不用维护多个域名的https证书。笔者以acme.sh为例,手把手教你配置https证书~本教程适用于centos 6....

2021可用的百度网盘高速下载方法分享

2021可用的百度网盘高速下载方法分享

最新可用方法http://blog.bitefu.net/post/163.html方法很简单就是利用网盘直链下载助手【网盘直链下载助手】是一款免费开源获取网盘文件真实下载地址的油猴脚本,基于PCSAPI,支持Windows,Mac,Lin...

遭遇国外ip抓取或攻击怎么办一招解决禁止海外IP访问

遭遇国外ip抓取或攻击怎么办一招解决禁止海外IP访问

究发现很多网站被攻击都是来自海外的肉鸡,所以禁掉海外IP访问网站也是不错的防护手段,而且国内网站几乎很少有国外用户访问,称之为大局域网也不为过。今天主机吧来教大家如何利用域名解析禁止掉海外IP访问网站。绝大多数域名解析服务商都是提供电信联通...

在CentOS 5.x 6.x里使用yum源 换阿里云国内源换vault.centos.org源

阿里云CentOS 5 的系统,无法用yum来安装应用软件。  原因:CentOS 5 在2017-03-31日已经结束支持,不再提供维护更新,所以包括阿里云镜像站的文件可能都是过时或已经有部分文件缺失。 &n...

安卓模拟器连接端口 及常用命令

下面是我总结和测试通过的:有的是搜集来的模拟器名称                     &nbs...

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。