uni发布H5页面缓存问题

时间:2021-11-30
本文章向大家介绍uni发布H5页面缓存问题,主要包括uni发布H5页面缓存问题使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

uni打包发布的H5,新用户在浏览器打开能浏览到新页面,但是旧用户在浏览器打开页面会存在缓存问题,浏览到的还是旧页面,使用浏览器强制刷新后,可以浏览到页面的新样式更改了

发现编译打包成H5版本的时候,打包出来的js文件默认都没有包含hash,原有的js文件名称是一样的

JS缓存问题

在项目manifest.json同一级目录下创建vue.config.js文件,添加代码

let filePath = ''
let Timestamp = ''
//编译环境判断,判断是否H5环境
if (process.env.UNI_PLATFORM === 'h5') {
  filePath = 'static/js/'; //打包文件存放文件夹路径
  Timestamp = '.' + new Date().getTime();//时间戳

}

module.exports = {
  configureWebpack: { // webpack 配置 解决js缓存的问题
    output: { // 输出重构  打包编译后的 文件目录 文件名称 【模块名称.时间戳】
      filename: `${filePath}[name]${Timestamp}.js`,
      chunkFilename: `${filePath}[name]${Timestamp}.js`
    },
  },
}

CSS样式缓存问题

查看H5配置的模板文件

修改模板文件中引用css的地方,在引用css文件名的前面加入哈希

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

 uni官网自定义模板自带了这个哈希值

原文地址:https://www.cnblogs.com/Intellectualscholar/p/15624646.html