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

简介: 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。


相关文章
|
2月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的软件工程项目管理系统的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的软件工程项目管理系统的详细设计和实现(源码+lw+部署文档+讲解等)
|
17天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的销售项目流程化管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的销售项目流程化管理系统附带文章源码部署视频讲解等
28 3
|
17天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的项目申报管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的项目申报管理系统附带文章源码部署视频讲解等
29 3
|
2天前
|
敏捷开发 缓存 测试技术
阿里云云效产品使用问题之构建Vue3项目,怎么让node_modules缓存下来
云效作为一款全面覆盖研发全生命周期管理的云端效能平台,致力于帮助企业实现高效协同、敏捷研发和持续交付。本合集收集整理了用户在使用云效过程中遇到的常见问题,问题涉及项目创建与管理、需求规划与迭代、代码托管与版本控制、自动化测试、持续集成与发布等方面。
|
8天前
|
前端开发
[巨详细]使用HBuilder-X新建uniapp项目教程
【6月更文挑战第6天】安装HBuilder-X 详细步骤可看上文》》 启动uniapp项目 先打开HBuilder-X
14 5
|
19天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的项目申报系统的设计与实现附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的项目申报系统的设计与实现附带文章源码部署视频讲解等
40 12
|
19天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的大学生双创竟赛项目申报与路演管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的大学生双创竟赛项目申报与路演管理系统附带文章源码部署视频讲解等
29 1
|
26天前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的软件工程项目管理系统附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的软件工程项目管理系统附带文章和源代码部署视频讲解等
20 5
|
25天前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的项目监管系统附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的项目监管系统附带文章和源代码部署视频讲解等
18 2
|
25天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的家政项目小程序的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的家政项目小程序的详细设计和实现
15 0
基于SpringBoot+Vue+uniapp微信小程序的家政项目小程序的详细设计和实现