首页 > 其他分享 >uniapp开发公众号H5时用户缓存无法清除问题

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

时间:2023-06-13 15:15:05浏览次数:56  
标签:uniapp 缓存 文件 TimeStamp js html index H5 CSS

 业务场景:

    此项目是一个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

相关文章

  • 浏览器缓存内幕与getLastModified方法
    源:评:[问题描述:] 1)userlogout之后,按回退按钮又可进行提交; IE缓存的问题。 登出系统之后,输入刚才的URL,依然能访问原来的页面(但是有任何操作就会返回到登陆的页面),这是IE缓存的问题,只要清除调IE的缓存就好。   清除IE缓存的方法有两种,一是在浏览器端控制,二是在服务器端返回Re......
  • STM32F429 Discovery开发板应用:使用FreeRTOS队列+DMA双缓存实现串口数据接收
     参考帖子:https://blog.csdn.net/freedompoi/article/details/122350866目前想要实现STM32F4自带的DMA双缓冲区,尝试过一版,结果不能预期,就使用了RxHalfCplt和RxCplt去实现DMA双缓冲区的效果。现在有时间了,又重新实现STM32F4自带的DMA双缓冲区,作为参考。 MCU:STM32F429ZIT6......
  • H5 qq浏览器video拦截处理
    QQ浏览器中如果使用video标签,那么浏览器会将video劫持,使用他们浏览器自带的video,那么层级会很高,之前写在video上面的样式就会被覆盖,因此可以把视频url转成blod,那么就可以解决从虎牙直播发现的,他们转为blod后,上面就可以加弹幕,滚动条等,因此发现了这个 1、将video的视频链接转为......
  • 缓存雪崩、缓存击穿、缓存穿透原因及解决办法
    缓存雪崩是指在缓存中的大量数据在同一个时刻全部过期,导致原本这些可以由缓存中间件处理的高并发请求,一下子全部打到数据库,导致数据库服务器崩溃的一种现象。那么出现缓存雪崩的原因可以有①:缓存中间件宕机。②:缓存中大部分key都设置了相同的时间,导致这些key在同一时间内全部失效......
  • H5实现左右滑动手势
    使用已有的轮子简单实现H5左右滑动手势安装vue2-touch-eventsnpminstallvue2-touch-events在main.js中引入//main.jsimportVue2TouchEventsfrom'vue2-touch-events'Vue.use(Vue2TouchEvents)通过自定义指令使用<!--template--><!--需要监听左右滑动手势的......
  • 游戏约玩陪玩圈子系统APP小程序H5,你需要了解的事情
    游戏约玩陪玩小程序开发的市场需求分析目前,中国约有5、6亿游戏玩家,其中约有2亿付费玩家,这也表明大多数玩家愿意为他们最喜欢的游戏付费。随着游戏体验的提高,玩家更愿意找到合适的游戏玩伴。点击咨询完整免费源码游戏约玩陪玩小程序开发都需那些功能呢?1、电竞游戏资讯通过建......
  • uniapp vue3 setup + 云开发开发个人小程序
    最近使用uniappvue3setup+云开发开发了个人小程序,设计使用figma软件,看下成品截图吧(可以直接微信搜索【识光】小程序体验,或者最底部有码可以直接扫) ......
  • 【操作系统】【硬件结构】CPU 缓存一致性
    1  前言我们看了存储器的层次结构,知道CPU中有多级缓存,有共享的也有私有的,那么不可避免的一个问题就是缓存的一致性,这节我们来看看哈。2  CPUCache的数据写入随着时间的推移,CPU和内存的访问性能相差越来越大,于是就在CPU内部嵌入了CPUCache(高速缓存),CPUCache离CPU......
  • 基于Go的缓存实现
    概念缓存是计算机科学中的一个重要概念。设想某个组件需要访问外部资源,它向外部源请求资源,接收并使用资源,这些步骤都需要花费时间。当组件再次需要资源时,可以再次请求资源,但这种方式从时间上考虑是比较低效的。相反,组件可以将请求结果保存在本地某处,然后再次使用,使用本地数据总是比......
  • B站缓存.m4s转成可以观看使用的.mp4
    Step1:寻找缓存文件首先把视频缓存到手机然后找到.m4s文件路径一般是这个(作者用的是安卓系统)一个文件夹就是一个缓存视频找到audio.m4s和video.m4sStep2:下载FFmpegFFmpeg是一套可以用来记录、转换数字音频、视频,并能将其转化为流的开源计算机程序——百度百科具体......