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

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

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

记录在使用 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,
	}
}

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

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

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

分享给朋友:

相关文章

微软版Ghost Win10:FFU映像备份和还原

微软版Ghost Win10:FFU映像备份和还原

在日常的维护中,系统的备份和还原是大家经常需要操作的事情。虽然Windows 10已经提供很多的工具,如系统还原、WIM备份/还原,VHD备份等。不过这些工具大多是基于文件的备份/还原。我们以前经常的使用的Ghost则是基于扇区的备份/还原...

PHP和Redis实现在高并发下的抢购及秒杀功能

抢购、秒杀是平常很常见的场景,面试的时候面试官也经常会问到,比如问你淘宝中的抢购秒杀是怎么实现的等等。抢购、秒杀实现很简单,但是有些问题需要解决,主要针对两个问题:一、高并发对数据库产生的压力二、竞争状态下如何解决库存的正确减少("...

python3 selenium webdriver.Chrome php 爬取汽车之家所有车型详情数据[开源版]

介绍本接口是车型库api的补充,用于爬取汽车之家所有车型详情数据开源地址:https://gitee.com/web/CarApi/tree/master/python软件架构python3 selenium webdriver.Chrom...

记一次阿里云服务器cc攻击防护 windows 2012 iis8

记一次阿里云服务器cc攻击防护 windows 2012 iis8

上次连续一周左右阿里云服务器都在遭受cc攻击.导致访问量特别大,节假日接口调用特别缓慢或者根本访问不了的情况.本身服务器安装了 网站安全狗(IIS版) .并开始了防cc攻击.但是呢,平时还行,这次压力山大.于是一气之下用pytho...

全世界最快dns分享 Public DNS Server List

偶然发现一个共享全世界最快dns的网站,当然也包含中国了https://public-dns.info/ 中国https://public-dns.info/nameserver/cn.html...

apache限制某个目录下的php文件没有执行权限 解决图片木马

1. 使用.htaccess 文件限制 在要限制php执行的目录下,创建.htaccess文件,加入内容php_flag engine off.htaccess 下载地址(使用方法,下载后解压 上传.htaccess文件到附件目录)http...

发表评论

访客

看不清,换一张

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