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

2024-06-26 08:12| 来源: 网络整理| 查看: 265

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页面，在请求头加入

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

【本文地址】

公司简介

联系我们