uni-app开发公众号H5时防止页面被缓存的处理

简介: 修改页面后重新打包,测试人员在确认问题时总是说没改,页面没有变化,需要进行繁琐的清缓存操作才能获取到最新版本。下面介绍下如何修改uni-app防止页面缓存。

本文作者:薛定喵君
原文地址:http://xuedingmiao.com/blog/uniapp_avoid_cache.html

背景

修改页面后重新打包,测试人员在确认问题时总是说没改,页面没有变化,需要进行繁琐的清缓存操作才能获取到最新版本。

解决方法

确定需要修改的文件,首先我们要看 src/manifest.json 里面定义的 template 字段,根据值找到模板文件。

例如: public/index.html

缓存的文件主要是css和js两种,所以我们要分别处理。

样式缓存处理

我们只需要修改模板文件中引用css的地方,在引用css文件名的前面加入哈希。类似下面这种方式:

<link rel="stylesheet" href="<%= BASE_URL %>static/index.<%= VUE_APP_INDEX_CSS_HASH %>.css" />

如果已经自带了这个哈希值则不用做这个处理。

JS缓存处理

修改入口页面的js引用机制,加入时间戳。

具体要在项目根目录下添加一个vue.config.js配置,需要你的APP是命令行创建的,这样在服务器上打包的时候才可以加载使用。

然后输入如下内容:

if (process.env.UNI_PLATFORM === 'h5') {
    let filePath = 'static/js/'
    let Timestamp = new Date().getTime()
    module.exports = {
        // webpack配置
        filenameHashing: false,
        configureWebpack: { // webpack 配置 解决js缓存的问题
            output: { // 输出重构  打包编译后的 文件目录/文件名称?v=时间戳
                filename: `${filePath}[name].js?v=${Timestamp}`,
                chunkFilename: `${filePath}[name].js?v=${Timestamp}`
            },
        }
    }
} else {
    // 其他打包配置
    module.exports = {
        // webpack 相关配置
        filenameHashing: false
    }
}

这样在打包的时候就会在引用的页面js后面跟上版本,从而使微信浏览器在每次发布后都加载新的页面js保证最新。

参考资料

相关文章
|
1月前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
546 7
|
1月前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
660 1
|
23天前
|
小程序 数据挖掘 UED
开发1个上门家政小程序APP系统,都有哪些功能?
在快节奏的现代生活中,家政服务已成为许多家庭的必需品。针对传统家政服务存在的问题,如服务质量不稳定、价格不透明等,我们历时两年开发了一套全新的上门家政系统。该系统通过完善信用体系、提供奖励机制、优化复购体验、多渠道推广和多样化盈利模式,解决了私单、复购、推广和盈利四大痛点,全面提升了服务质量和用户体验,旨在成为家政行业的领导者。
|
1月前
|
JavaScript 前端开发 UED
Vue与uni-app开发中通过@font-face巧妙引入自定义字体
Vue与uni-app开发中通过@font-face巧妙引入自定义字体
85 9
|
1月前
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
241 3
|
1月前
|
缓存 小程序 索引
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
208 1
|
21天前
|
机器人
布谷直播App系统源码开发之后台管理功能详解
直播系统开发搭建管理后台功能详解!
|
1月前
|
小程序 JavaScript API
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
这篇文章介绍了如何在uni-app和微信小程序中实现将图片保存到用户手机相册的功能。
640 0
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
|
30天前
|
NoSQL PHP Redis
布谷语音app源码服务器环境配置及技术开发语言
布谷语音app源码服务器环境配置及技术语言研发。。
|
1月前
|
JavaScript 小程序 开发者
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
363 0
下一篇
无影云桌面