如何在用uni-app开发微信公众号H5时防止页面被缓存

背景

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

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 保证最新。