当前位置:首页 > 技术分享

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

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

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

分享给朋友:

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

apicloud开发调试方法 nodejs [超低,超省内存占用] 兼容最新用友 you-cli

apicloud 开发 + 模拟器 +浏览器 +其它这些一开相当占用内存,让电脑不堪重负.于是我想到用命令行来实现调试这样可以不开启apicloud软件进行调试了 命令行+ 模拟器 就可以调试了准备1.检出项目.可以用svn检出,也可以直接…

mysql update不支持set子查询更新 的解决办法

mysql update不支持set子查询更新 的解决办法

先看示例:SELECT uin,account,password,create_user_uin_tree FROM sys_user结果:表中的create_user_uin_tree标识该条记录由谁创建。创…

[教程] WTG备份新方法——FFU镜像格式

[教程] WTG备份新方法——FFU镜像格式

FFU(Full Flash Update) 格式是一种基于扇区的磁盘镜像文件格式,默认使用快速哈夫曼压缩(Xpress-Huffman)算法压缩,在捕获和部署时会生成哈希表进行校验,并可以使用DISM修改捕获的镜像。FFU格式很适合WTG…

安装Windows 10X 教你如何安装Win10X正式版 及下载地址

安装Windows 10X 教你如何安装Win10X正式版 及下载地址

安装Windows 10X 教你如何安装Win10X正式版:Windows 10X是Windows 10操作系统的新版本,主要针对双屏电脑。由于即将运行Windows 10X的双屏电脑(例如即将面世的Surface Neo)的开发遇到挫折,…

PIP 更换国内安装源linux/windows

pip国内的一些镜像  阿里云 http://mirrors.aliyun.com/pypi/simple/   中国科技大学 https://pypi.mirrors.ustc.edu.cn/simple/   豆瓣(…

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

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

发表评论

访客

看不清,换一张

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