uniapp打包H5的时候 清楚缓存(不安装依赖的前提下)

问题

在写项目的时候,打包好一个H5 发布成功,后来又重新打包新的包进行更新迭代,但是用户手机上还是上一个版本,本地缓存还是没有清除。

解决问题

步骤一:html不缓存

在html中,解决缓存的方法主要是依赖以下标签的属性:

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />

这几个标签是什么意思呢:

这几个标签的作用是禁用浏览器缓存,确保每次访问页面时都从服务器加载最新的内容。具体解释如下:(1<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />:这个标签设置了HTTP响应头中的Cache-Control属性,告诉浏览器不要缓存页面的任何部分,包括图片、脚本等。同时,要求浏览器在每次请求时都必须向服务器验证资源的新鲜度。
(2<meta http-equiv="Pragma" content="no-cache" />:这个标签设置了HTTP响应头中的Pragma属性,它与Cache-Control类似,但主要用于HTTP/1.0协议。同样表示不缓存页面的任何部分。
(3<meta http-equiv="Expires" content="0" />:这个标签设置了HTTP响应头中的Expires属性,它指定了页面的过期时间。设置为0表示页面立即过期,即每次都需要重新从服务器获取。综合这三个标签,可以确保浏览器不会缓存页面的任何内容,从而确保用户总是看到最新的页面内容。

所以要保证打包时候生成的html具备这几个标签,就能保证用户每次请求的都是服务器是上最新版本的html文件
uniapp官方提供了一个东西叫做:index.html模板
就在manifest.json =>> web配置 =>> index.html模板路径:
在这里插入图片描述
在manifest.json同级目录下创建一个名为 :template.h5.html 的文件
文件内容如下所示:

<!DOCTYPE html>
<html lang="zh-CN"><head><!-- 由于自定义了meta标签想要实现自动化打包添加该标签,需要添加自定义html模板 --><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- 这个标签设置了HTTP响应头中的Cache-Control属性,告诉浏览器不要缓存页面的任何部分,包括图片、脚本等。同时,要求浏览器在每次请求时都必须向服务器验证资源的新鲜度。 --><meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" /><!-- 这个标签设置了HTTP响应头中的Pragma属性,它与Cache-Control类似,但主要用于HTTP/1.0协议。同样表示不缓存页面的任何部分。 --><meta http-equiv="Pragma" content="no-cache" /><!-- 这个标签设置了HTTP响应头中的Expires属性,它指定了页面的过期时间。设置为0表示页面立即过期,即每次都需要重新从服务器获取。 --><meta http-equiv="Expires" content="0" /><title><%= htmlWebpackPlugin.options.title %></title><script>var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') || CSS.supports('top: constant(a)'))document.write('<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' + (coverSupport ? ', viewport-fit=cover' : '') + '" />')</script><link rel="stylesheet" href="<%= BASE_URL %>static/index.<%= VUE_APP_INDEX_CSS_HASH %>.css" /></head><body><!-- <noscript><strong>Please enable JavaScript to continue.</strong></noscript> --><div id="app"></div><!-- built files will be auto injected --></body>
</html>

打包以后的index.html文件如下所示:已经包含了刚刚说的三行代码在这里插入图片描述

步骤二:js不缓存

步骤一是解决了html不缓存的问题,但是解决不了js缓存的问题,就需要使用vue的打包机制来解决问题了。

vue.config.js文件是Vue项目的配置文件,用于自定义项目的配置选项。在这个文件中,你可以设置各种与构建、开发和部署相关的配置项,例如:(1)修改webpack配置:可以对webpack进行个性化配置,如修改入口文件、输出目录、插件等。(2)开发服务器配置:可以配置开发服务器的端口号、代理设置等。(3)生产环境优化:可以开启代码压缩、分割等优化选项。(4)单元测试配置:可以配置单元测试工具(如Jest)的相关选项。(5)集成第三方库或插件:可以添加一些第三方库或插件的配置信息。
总之,vue.config.js文件可以让你更灵活地控制Vue项目的构建和运行过程。

所以,再项目的根目录下面创建一个vue.config.js文件:具体代码如下:

let filePath = '';   // 默认文件路径
let TimeStamp = '';  // 时间戳
let Version = '-V1.0.0-'; // 版本号
//编译环境判断,可以根据不同环境来做相应的配置
if (process.env.UNI_PLATFORM === 'h5') {filePath = 'static/js/'TimeStamp = new Date().getTime();process.env.VUE_APP_INDEX_CSS_HASH=`${Version}${TimeStamp}`   //给css文件也使用该时间戳
}module.exports = {configureWebpack: {output: { //重构文件名filename: `${filePath}[name].${Version}${TimeStamp}.js`, // index文件重命名为带有版本号+时间戳的格式chunkFilename: `${filePath}[name].${Version}${TimeStamp}.js` // static/js/pages-home-index.-V1-754654657.js  },},
}

这样配置保证每次打包后的js文件名和之前的文件名字都不一样,此时找不到文件名就会到服务器请求最新的文件,即可每次不会使用缓存文件

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/403166.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Keepalived学习

环境准备&#xff1a;两台服务器&#xff0c;两台客户机&#xff0c;关闭火墙和selinux 在两台主机上安装ka yum install keepalived -y 开启软件 keepalived配置 进入文件 vim /etc/keepalived/keepalived.conf 修改配置 配置slave 效果 在另一台路由配置 抢占模式和非…

简洁清新个人博客网页模板演示学习

30多款个人博客、个人网站、个人主页divcss,html在线预览,个人静态页面模板(wordpress、帝国cms、typecho主题模板).这些简洁和优雅的博客网页模板,为那些想成为创建博客的个人或媒体提供灵感设计。网页模板可以记录旅游、生活方式、食品或摄影博客等网站。部分网页模板来源网友…

二叉树进阶之二叉搜索树:一切的根源

前言&#xff1a; 在学完了简单的容器与C面向对象的三大特性之后&#xff0c;我们首先接触的就是map与set两大容器&#xff0c;但是这两个容器底层实现的原理是什么呢&#xff1f;我们不而知&#xff0c;今天&#xff0c;主要来为学习map与set的底层原理而打好基础&#xff0c…

面试官:Java虚拟机是什么,Java虚拟机的内存模型是什么样子的?

哈喽&#xff01;大家好&#xff0c;我是小奇&#xff0c;一个专给面试官添堵的撑序员 小奇打算以轻松幽默的对话方式来分享一些技术&#xff0c;如果你觉得通过小奇的文章学到了东西&#xff0c;那就给小奇一个赞吧 文章持续更新&#xff0c;可以微信搜索【小奇JAVA面试】第一…

基于WEB的旅游推荐系统设计与实现

TOC springboot280基于WEB的旅游推荐系统设计与实现 第1章 绪论 1.1选题动因 当前的网络技术&#xff0c;软件技术等都具备成熟的理论基础&#xff0c;市场上也出现各种技术开发的软件&#xff0c;这些软件都被用于各个领域&#xff0c;包括生活和工作的领域。随着电脑和笔…

SVN权限控制解析

一、基础数据说明 1. 代码目录存在多级 图1-1 SVN目录 如图1-1&#xff1a; 第一级目录是 科顺&#xff0c;代表 科顺项目&#xff0c;项目文件包括 文档、代码等等。第二级目录 分别是 2.1 resources 用于存放文档&#xff0c;开发和实施均需…

Qt登录窗口

#include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget),btn(new QPushButton("取消", this)),login_btn(new QPushButton("登录", this)) { ui->setupUi(this);thi…

Llama 3.1深度解析:405B、70B及8B模型的多语言与长上下文处理能力

Llama 3.1 发布了&#xff01;今天我们迎来了 Llama 家族的新成员 Llama 3.1 进入 Hugging Face 平台。我们很高兴与 Meta 合作&#xff0c;确保在 Hugging Face 生态系统中实现最佳集成。Hub 上现有八个开源权重模型 (3 个基础模型和 5 个微调模型)。 Llama 3.1 有三种规格: …

法线纹理贴图计算(切线空间世界空间)

效率&#xff1a; 在切线空间中计算&#xff0c;效率更高&#xff0c;因为可以在顶点着色器中就完成对光照、视角方向的矩 阵变换&#xff0c;计算量相对较小。( 矩阵变换在顶点着色器中计算) 在世界空间中计算&#xff0c;效率较低&#xff0c;由于需要对法线贴图进行采样&a…

mybatis druid postgresql statement超时原理原理

yaml设置超时 mybatis-plus:mapper-locations: classpath:/mapper/*.xml # MyBatis Mapper XML文件的位置type-aliases-package: com.company.mi.entity # 实体类所在的包configuration:default-statement-timeout: 10 configuration 设置超时 BaseStatementHandler设置超时 …

Thread 类的基本用法

目录 什么是线程&#xff1f; 编写多线程程序 线程创建的方式 继承 Thread 类&#xff0c;重写 run 方法 实现 Runnable 接口&#xff0c;重写 run 方法 匿名内部类创建 Thread 子类 匿名内部类创建 Runnable 子类对象 lambda表达式 Thread 类和常用方法 Thread 的常…

node.js part1

Node.js Node.js 是一个跨平台JavaScript 运行环境&#xff0c;使开发者可以搭建服务器端的 JavaScript 应用程序。作用&#xff1a;使用Node.js编写服务器端程序 编写数据接口&#xff0c;提供网页资源浏览功能等等 前端工程化&#xff1a;为后续学习Vue和React等框架做铺垫. …

基于CDIO概念的人工智能物联网系统开发与实施的人才培养研究

目录 1. 引言&#xff08;Introduction&#xff09; 2. AIoT技术及其培训特点&#xff08;The Characteristics of AIOT and Its Training&#xff09; 3. 基于CDIO概念的AIoT课程改革&#xff08;CDIO Concept-based Reform of AIOT Course&#xff09; 4. AIoT课程内容安…

Idea里配置Maven版本

一、安装Maven 1. 官网下载maven地址&#xff1a; Maven – Download Apache Maven Binary是可执行版本&#xff0c;已经编译好可以直接使用。 Source是源代码版本&#xff0c;需要自己编译成可执行软件才可使用。tar.gz和zip两种压缩格式,其实这两个压缩文件里面包含的内容是…

Verilog刷题笔记50

题目&#xff1a; Given the following state machine with 1 input and 2 outputs: 解题&#xff1a; module top_module(input in,input [9:0] state,output [9:0] next_state,output out1,output out2);assign next_state[0]~in&(state[0]|state[1]|state[2]|state[3]…

Java方法01:什么是方法

本节视频链接&#xff1a;Java方法01&#xff1a;什么是方法&#xff1f;_哔哩哔哩_bilibilihttps://www.bilibili.com/video/BV12J41137hu?p45&vd_sourceb5775c3a4ea16a5306db9c7c1c1486b5 Java中的‌方法‌是一段执行特定任务的代码片段&#xff0c;‌它是程序的基本构…

C#中的S7协议

S7协议-S7COMM S7COMM 进行写 CTOP->PDU type已知枚举值 0X0E连接请求0x0d连接确认0x08断开请求0x0c断开确认0x05拒绝访问0x01加急数据0x02加急数据确认0x04用户数据0x07TPDU错误0x0f数据传输 S7Header->ROSCTR已知枚举值 0X01JOB REQUEST。主站发送请求0x02Ack。从站…

Android MediaRecorder 视频录制及报错解决

目录 一、start failed: -19 二、使用MediaRecorder录制视频 2.1 申请权限 2.2 布局文件 2.3 MediaRecordActivity 2.4 运行结果 三、拓展 3.1 录制视频模糊(解决) 3.2 阿里云OSS上传文件 3.2.1 权限(刚需) 3.2.2 安装SDK 3.2.3 使用 相关链接 一、start failed…

基于spring boot的小型诊疗预约平台的设计与开发

TOC springboot262基于spring boot的小型诊疗预约平台的设计与开发 绪论 1.1 研究背景 当前社会各行业领域竞争压力非常大&#xff0c;随着当前时代的信息化&#xff0c;科学化发展&#xff0c;让社会各行业领域都争相使用新的信息技术&#xff0c;对行业内的各种相关数据进…

C++之模版初阶

目录 前言 1.泛型编程 2.函数模版 2.1函数模版概念 2.2函数模版格式 2.3函数模版的原理 2.4函数模版的实例化 2.5模版参数的匹配原则 3.类模版 3.1类模版的定义格式 3.2类模版的实例化 结束语 前言 前面我们学习了C的类与对象和内存管理&#xff0c;接下来我们继续学习…