业务场景:
此项目是一个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 }, }, }
标签:uniapp,缓存,文件,TimeStamp,js,html,index,H5,CSS From: https://www.cnblogs.com/haonanZhang/p/17477540.html