1. HTTP3W博客首页
  2. 建站

uni-app开发H5防止页面被缓存

背景

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

解决方法

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

例如: public/index.html

缓存的文件主要是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
	}
}

这样在打包的时候就会在引用的页面js后面跟上版本,从而使微信浏览器在每次发布后都加载新的页面js保证最新

1、原创文章,作者:诺米,如若转载,请注明出处:https://www.http3w.com/archives/583

2、本站内容若有雷同从属巧合,若侵犯了您的权益,请联系本站删除,E-mail: wtao219@qq.com

发表评论

您的电子邮箱地址不会被公开。

联系我们

254007489

在线咨询:点击这里给我发消息

邮件:wtao219@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息