uniapp开发公众号H5时用户缓存无法清除问题

  业务场景:

    此项目是一个vx公众号h5项目,每次更新版的时候用户端由于有缓存,每次都是使用滞后的版本,由此也被许多用户投诉

解决方案:

一、index.html文件如何保证不缓存,每次都使用服务器上最新的代码?

此时需要一下标签:



 由于自定义了meta标签想要实现自动化打包添加该标签,需要添加自定义html模板

1.新建template.h5.html文件,代码如下:



	
		
		
		
		
		
		
			<%= htmlWebpackPlugin.options.title %>
		
		
		
	
	
		
		

2、 在manifest.json=>h5配置=>index.html模板路径添加文件名称   :  template.h5.html

添加此标签后用户每次请求的都是服务器是上最新版本的html文件,但是不能保证js文件都是最新的,因此还需要第二步

二、保证每次打包后的js文件名和之前的文件名字都不一样,此时找不到文件名就会到服务器请求最新的文件,即可保安每次不会使用缓存文件,需要在vue.config.js文件添加以下代码

let filePath = '';   // 默认文件路径
let TimeStamp = '';  // 时间戳
let Version = '-V1.0.1-'; // 版本号
//编译环境判断,可以根据不同环境来做相应的配置
if (process.env.UNI_PLATFORM === 'h5') {
  filePath = 'static/js/'
  TimeStamp = new Date().getTime();
  process.env.VUE_APP_INDEX_CSS_HASH=`${Version}${TimeStamp}`   //给css文件也使用该时间戳
}

module.exports = {
  configureWebpack: {
    output: { //重构文件名
      filename: `${filePath}[name].${Version}${TimeStamp}.js`, // index文件重命名为带有版本号+时间戳的格式
      chunkFilename: `${filePath}[name].${Version}${TimeStamp}.js` // static/js/pages-home-index.-V1-754654657.js  
    },
  },
}

你可能感兴趣的:(微信,前端,vue.js,html)