uniapp打包发布h5项目的缓存问题

uniapp 打包 H5 生成的js文件，默认情况下是不包含版本号以及时间戳后缀。这样会导致H5新版打包上线后，用户依旧使用的是浏览器中缓存的老版js文件。文件更新滞后等现象。

解决方法

第一种(推荐)

在根目录新建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`
    },
  },
}

第二个方法

在应用程序的入口文件（如 main.js 或 App.vue）uniapp项目:h5template.html 中添加时间戳。例如，您可以在 index.html 文件中添加以下代码：

 var script = document.createElement('script');
       script.src = '/js/app.js?' + new Date().getTime();
       document.getElementsByTagName('head')[0].appendChild(script);

注意:这个方法可以生效,但是在电脑端调试的时候会看到一个报错,但是不影响使用,有知道完美解决的可以留言一下哦,感谢.

第三个方法

设置缓存,index.html页面，在请求头加入

<meta http-equiv="Expires" content="0">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-control" content="no-cache">
<meta http-equiv="Cache" content="no-cache">

手机页面通常在第一次加载后会进行缓存，然后每次刷新会使用缓存而不是去重新向服务器发送请求。如果不希望使用缓存可以设置no-cache。