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官网自定义模板自带了这个哈希值