前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >uni-app开发微信公众号H5时防止页面被缓存的处理

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

作者头像
薛定喵君
发布2021-10-28 10:51:50
3.7K0
发布2021-10-28 10:51:50
举报
文章被收录于专栏:薛定喵君

记录在使用 uni-app 开发公众号应用时防止被缓存的方法

# 背景

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

# 解决方法

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

例如: public/index.html

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

# 样式缓存处理

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

代码语言:javascript
复制
<link
  rel="stylesheet"
  href="<%= BASE_URL %>static/index.<%= VUE_APP_INDEX_CSS_HASH %>.css"
/>

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

# JS 缓存处理

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

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

然后输入如下内容:

代码语言:javascript
复制
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 保证最新。

# 参考资料

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2021/10/26 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • # 背景
  • # 解决方法
    • # 样式缓存处理
      • # JS 缓存处理
      • # 参考资料
      领券
      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档