问题
在写项目的时候,打包好一个H5 发布成功,后来又重新打包新的包进行更新迭代,但是用户手机上还是上一个版本,本地缓存还是没有清除。
解决问题
步骤一:html不缓存
在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" />
这几个标签是什么意思呢:
这几个标签的作用是禁用浏览器缓存,确保每次访问页面时都从服务器加载最新的内容。具体解释如下:(1)<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />:这个标签设置了HTTP响应头中的Cache-Control属性,告诉浏览器不要缓存页面的任何部分,包括图片、脚本等。同时,要求浏览器在每次请求时都必须向服务器验证资源的新鲜度。
(2)<meta http-equiv="Pragma" content="no-cache" />:这个标签设置了HTTP响应头中的Pragma属性,它与Cache-Control类似,但主要用于HTTP/1.0协议。同样表示不缓存页面的任何部分。
(3)<meta http-equiv="Expires" content="0" />:这个标签设置了HTTP响应头中的Expires属性,它指定了页面的过期时间。设置为0表示页面立即过期,即每次都需要重新从服务器获取。综合这三个标签,可以确保浏览器不会缓存页面的任何内容,从而确保用户总是看到最新的页面内容。
所以要保证打包时候生成的html具备这几个标签,就能保证用户每次请求的都是服务器是上最新版本的html文件
uniapp官方提供了一个东西叫做:index.html模板
就在manifest.json =>> web配置 =>> index.html模板路径:
在manifest.json同级目录下创建一个名为 :template.h5.html 的文件
文件内容如下所示:
<!DOCTYPE html>
<html lang="zh-CN"><head><!-- 由于自定义了meta标签想要实现自动化打包添加该标签,需要添加自定义html模板 --><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- 这个标签设置了HTTP响应头中的Cache-Control属性,告诉浏览器不要缓存页面的任何部分,包括图片、脚本等。同时,要求浏览器在每次请求时都必须向服务器验证资源的新鲜度。 --><meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" /><!-- 这个标签设置了HTTP响应头中的Pragma属性,它与Cache-Control类似,但主要用于HTTP/1.0协议。同样表示不缓存页面的任何部分。 --><meta http-equiv="Pragma" content="no-cache" /><!-- 这个标签设置了HTTP响应头中的Expires属性,它指定了页面的过期时间。设置为0表示页面立即过期,即每次都需要重新从服务器获取。 --><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>
打包以后的index.html文件如下所示:已经包含了刚刚说的三行代码
步骤二:js不缓存
步骤一是解决了html不缓存的问题,但是解决不了js缓存的问题,就需要使用vue的打包机制来解决问题了。
vue.config.js文件是Vue项目的配置文件,用于自定义项目的配置选项。在这个文件中,你可以设置各种与构建、开发和部署相关的配置项,例如:(1)修改webpack配置:可以对webpack进行个性化配置,如修改入口文件、输出目录、插件等。(2)开发服务器配置:可以配置开发服务器的端口号、代理设置等。(3)生产环境优化:可以开启代码压缩、分割等优化选项。(4)单元测试配置:可以配置单元测试工具(如Jest)的相关选项。(5)集成第三方库或插件:可以添加一些第三方库或插件的配置信息。
总之,vue.config.js文件可以让你更灵活地控制Vue项目的构建和运行过程。
所以,再项目的根目录下面创建一个vue.config.js文件:具体代码如下:
let filePath = ''; // 默认文件路径
let TimeStamp = ''; // 时间戳
let Version = '-V1.0.0-'; // 版本号
//编译环境判断,可以根据不同环境来做相应的配置
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 },},
}
这样配置保证每次打包后的js文件名和之前的文件名字都不一样,此时找不到文件名就会到服务器请求最新的文件,即可每次不会使用缓存文件