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

最新推荐文章于 2024-09-24 16:38:10 发布

Mr__proto__

最新推荐文章于 2024-09-24 16:38:10 发布

阅读量4.3k

点赞数 4

文章标签：微信前端 vue.js html

本文链接：https://blog.csdn.net/mr__proto__/article/details/126116029

版权

该博客介绍了如何解决Vue H5项目更新时用户端因缓存导致无法获取最新版本的问题。通过在index.html中添加特定的meta标签防止页面缓存，并在vue.config.js中配置Webpack输出带有版本号和时间戳的js文件名，确保每次请求的都是服务器上的最新资源。

摘要由CSDN通过智能技术生成

业务场景：

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

解决方案：

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

此时需要一下标签：

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />

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

1.新建template.h5.html文件，代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
		<meta http-equiv="Pragma" content="no-cache" />
		<meta http-equiv="Expires" content="0" />
		<title>
			<%= htmlWebpackPlugin.options.title %>
		</title>
		<script>
			var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') || CSS.supports('top: constant(a)'))
			document.write('<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' + (coverSupport ? ', viewport-fit=cover' : '') + '" />')
		</script>
		<link rel="stylesheet" href="<%= BASE_URL %>static/index.<%= VUE_APP_INDEX_CSS_HASH %>.css" />
	</head>
	<body>
		<noscript>
			<strong>Please enable JavaScript to continue.</strong>
		</noscript>
		<div id="app"></div>
		<!-- built files will be auto injected -->
	</body>
</html>

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  
    },
  },
}