当前位置: 首页 > news >正文

【vue】项目迭代部署后 自动清除浏览器缓存

前言: vue项目打包部署上线后,因浏览器缓存问题,导致用户访问的依旧是上个迭代批次的旧资源,需要用户手动清除缓存才能更新至最新版本,影响用户体验。
解决方法:

  1. html根文件添加以下标签
  <meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate"><meta http-equiv="expires" content="0">
  1. vue.config.js
const timeStamp = new Date().getTime();
module.exports = defineConfig({filenameHashing: false, // 打包的时候不使用hash值.因为我们有时间戳来确定项目的唯一性了.configureWebpack: {output: { // 输出重构 打包编译后的js文件名称,添加时间戳.filename: `js/js[name].${timeStamp}.js`,chunkFilename: `js/chunk.[id].${timeStamp}.js`,}},css: {extract: { // 打包后css文件名称添加时间戳filename: `css/[name].${timeStamp}.css`,chunkFilename: `css/chunk.[id].${timeStamp}.css`,}},
})
  1. package.json (注:每次build打包时,需要更改版本号)
"version": "1.0.0",
  1. main.js
const VUE_APP_VERSION = require('../package.json').version;
const vers = window.localStorage.getItem('appVersion');
if(VUE_APP_VERSION != vers){localStorage.clear()window.localStorage.setItem('appVersion', VUE_APP_VERSION);// 清除存储在浏览器的数据window.localStorage.removeItem('liveDataSort')window.localStorage.removeItem('liveListSort')location.reload()
}

相关文章:

【vue】项目迭代部署后 自动清除浏览器缓存

前言&#xff1a; vue项目打包部署上线后&#xff0c;因浏览器缓存问题&#xff0c;导致用户访问的依旧是上个迭代批次的旧资源&#xff0c;需要用户手动清除缓存才能更新至最新版本&#xff0c;影响用户体验。 解决方法&#xff1a; html根文件添加以下标签 <meta http-eq…...

Leetcode(滑动窗口习题思路总结,持续更新。。。)

讲解题目&#xff1a;长度最小的子数组 给定一个含有 n 个正整数的数组和一个正整数 target &#xff0c;找出该数组中满足其和 ≥ target 的长度最小的连续子数组。如果不存在符合条件的连续子数组&#xff0c;返回 0。示例: 输入: target 7, nums [2,3,1,2,4,3] 输出: 2 解…...

【UNIAPP】uniapp版图片压缩工具

二次封装的uniapp版本图片压缩、上传工具&#xff0c;支持全端&#xff08;H5、小程序、APP&#xff09; 新建文件&#xff1a;file-util.js class FileUtil {/*** [文件上传]* param {[object]} fileObj [图片地址]* param {[object]} formData [参数]* param {[str…...

PaddlePaddle 开源产业级文档印章识别PaddleX-Pipeline “seal_recognition”模型 开箱即用篇(一)

AI时代到来&#xff0c;各行各业都在追求细分领域垂直类深度学习模型&#xff0c;今天给大家介绍一个PaddlePaddle旗下&#xff0c;基于PaddleX Pipeline 来完成印章识别的模型“seal_recognition”。 官方地址&#xff1a;https://github.com/PaddlePaddle/PaddleX/blob/relea…...

Vue3 + Vite 项目引入 Typescript

文章目录 一、TypeScript简介二、TypeScript 开发环境搭建三、编译方式1. 自动编译单个文件2. 自动编译整个项目 四、配置文件1. compilerOptions基本选项严格模式相关选项&#xff08;启用 strict 后自动包含这些&#xff09;模块与导入相关选项 2. include 和 excludeinclude…...

微信小程序实战篇-分类页面制作

一、项目背景与目标 在微信小程序开发中&#xff0c;分类页面是一个常见且重要的功能模块。它能够帮助用户快速定位和浏览不同类别的商品或信息&#xff0c;提升用户体验和操作效率。今天&#xff0c;我们将深入探讨如何制作一个实用的微信小程序分类页面&#xff0c;先来看一下…...

第三十七章 如何清理docker 日志

如何清理docker 日志 目标 掌握docker 日志设置掌握docker日志的清理办法背景 在现代软件开发和部署环境中,Docker 容器技术因其轻量级、可移植性和高效资源利用的特点,已成为许多企业和开发团队的首选。Docker 容器在运行过程中会产生大量的日志信息,这些日志对于监控容器…...

二刷代码随想录第七天

454. 四数相加 II 先用map记录前两个数的和num1 num2的值出现了多少次再在后两个数组里找0 - (num1 num2),找到后就累加map中的次数 class Solution { public:int fourSumCount(vector<int>& nums1, vector<int>& nums2, vector<int>& nums3…...

1.tree of thought (使用LangChain解决4x4数独问题)

本教程将介绍如何使用LangChain库和chatglm API来解决一个4x4的数独问题。我们将通过以下步骤实现这一目标&#xff1a; 初始化chatglm 的聊天模型。定义数独问题和解决方案。创建一个自定义的检查器来验证每一步的思考。使用ToTChain来运行整个思考过程。 1. 初始化chatglm4…...

网络基础(4)IP协议

经过之前的学习对传输协议的学习&#xff0c;对于传输协议从系统底层到应用层对于socket套接字的学习已经有了一套完整的理论。 对于网络的层状结构&#xff0c;现在已经学习到了应用层和传输层: 在之前的学习中&#xff0c;通信的双方都只考虑了双方的传输层的东西&#xff0…...

124. 二叉树中的最大路径和【 力扣(LeetCode) 】

文章目录 零、原题链接一、题目描述二、测试用例三、解题思路四、参考代码 零、原题链接 124. 二叉树中的最大路径和 一、题目描述 二叉树中的 路径 被定义为一条节点序列&#xff0c;序列中每对相邻节点之间都存在一条边。同一个节点在一条路径序列中 至多出现一次 。该路径…...

echarts:简单实现默认显示两柱子折线,点击按钮后显示新的柱子

问&#xff1a; 用echarts实现&#xff1a;默认显示两柱子折线&#xff0c;点击“税率”按钮&#xff0c;显示税率柱子&#xff0c;之前的两柱子折线消失 回答&#xff1a; <!DOCTYPE html> <html lang"zh"> <head><meta charset"UTF-8…...

视频里的音频怎么提取出来成单独文件?音频提取照着这些方法做

在数字时代&#xff0c;视频与音频的分离与重组已成为日常需求之一。无论是出于制作背景音乐、保存讲座内容&#xff0c;还是编辑播客素材&#xff0c;提取视频中的音频并将其保存为单独文件都显得尤为重要。视频里的音频怎么提取出来成单独文件&#xff1f;本文将详细介绍几种…...

Excel——宏教程(精简版)

一、宏的简介 1、什么是宏&#xff1f; Excel宏是一种自动化工具&#xff0c;它允许用户录制一系列操作并将其转换为VBA(Visual Basic for Applications)代码。这样&#xff0c;用户可以在需要时执行这些操作&#xff0c;以自动化Excel任务。 2、宏的优点 我们可以利用宏来…...

C++中的std::tuple和std::pair

在C标准库中&#xff0c;std::tuple和std::pair是两种极具实用性的数据结构&#xff0c;它们都具备存储多个元素的功能&#xff0c;但各自有其独特的适用环境和特性。本文旨在深入探讨这两者之间的区别&#xff0c;并阐述在不同应用场景下应如何合理选择使用。 一、基本概念 s…...

引力搜索算法

引力搜索算法过程&#xff0c;包括了初始化、适应度评估、质量计算、加速度计算、更新速度和位置的一些步骤。 import numpy as np import random as rd from math import exp, sqrt import matplotlib.pyplot as plt from mpl_toolkits.mplot3d import Axes3D from matplotli…...

【时间之外】IT人求职和创业应知【35】-RTE三进宫

目录 新闻一&#xff1a;京东工业发布11.11战报&#xff0c;多项倍增数据体现工业经济信心提升 新闻二&#xff1a;阿里云100万核算力支撑天猫双11&#xff0c;弹性计算规模刷新纪录 新闻三&#xff1a;声网CEO赵斌&#xff1a;RTE将成为生成式AI时代AI Infra的关键部分 认知…...

Linux的目录结构

/ ├── bin # Binary - 存放用户可以直接使用的基本二进制可执行文件 ├── sbin # System Binaries - 存放系统管理员专用的二进制可执行文件 ├── usr # Unix System Resources - 存放用户使用的软件和库文件 │ ├── bin # Binary - 用户级应用程序…...

python: generator IDAL and DAL using sql server 2019

其它数据库也是一样的思维方式 create IDAL # encoding: utf-8 # 版权所有 2024 ©涂聚文有限公司 # 许可信息查看&#xff1a;言語成了邀功盡責的功臣&#xff0c;還需要行爲每日來值班嗎 # 描述&#xff1a; # Author : geovindu,Geovin Du 涂聚文. # IDE : P…...

命令执行简单

前言&#xff1a;小迪安全2022第一节反弹shell&#xff0c;小迪用的是两台都是云服务器&#xff0c;没有服务器可以在自己的主机上搭建也是可以的&#xff0c;主机上搭两个网站 思路&#xff1a;生成一个木马文件&#xff0c;下载到本机&#xff0c;然后利用本机上传到目标主机…...

深入剖析AI大模型:大模型时代的 Prompt 工程全解析

今天聊的内容&#xff0c;我认为是AI开发里面非常重要的内容。它在AI开发里无处不在&#xff0c;当你对 AI 助手说 "用李白的风格写一首关于人工智能的诗"&#xff0c;或者让翻译模型 "将这段合同翻译成商务日语" 时&#xff0c;输入的这句话就是 Prompt。…...

Appium+python自动化(十六)- ADB命令

简介 Android 调试桥(adb)是多种用途的工具&#xff0c;该工具可以帮助你你管理设备或模拟器 的状态。 adb ( Android Debug Bridge)是一个通用命令行工具&#xff0c;其允许您与模拟器实例或连接的 Android 设备进行通信。它可为各种设备操作提供便利&#xff0c;如安装和调试…...

8k长序列建模,蛋白质语言模型Prot42仅利用目标蛋白序列即可生成高亲和力结合剂

蛋白质结合剂&#xff08;如抗体、抑制肽&#xff09;在疾病诊断、成像分析及靶向药物递送等关键场景中发挥着不可替代的作用。传统上&#xff0c;高特异性蛋白质结合剂的开发高度依赖噬菌体展示、定向进化等实验技术&#xff0c;但这类方法普遍面临资源消耗巨大、研发周期冗长…...

Matlab | matlab常用命令总结

常用命令 一、 基础操作与环境二、 矩阵与数组操作(核心)三、 绘图与可视化四、 编程与控制流五、 符号计算 (Symbolic Math Toolbox)六、 文件与数据 I/O七、 常用函数类别重要提示这是一份 MATLAB 常用命令和功能的总结,涵盖了基础操作、矩阵运算、绘图、编程和文件处理等…...

C# SqlSugar:依赖注入与仓储模式实践

C# SqlSugar&#xff1a;依赖注入与仓储模式实践 在 C# 的应用开发中&#xff0c;数据库操作是必不可少的环节。为了让数据访问层更加简洁、高效且易于维护&#xff0c;许多开发者会选择成熟的 ORM&#xff08;对象关系映射&#xff09;框架&#xff0c;SqlSugar 就是其中备受…...

项目部署到Linux上时遇到的错误(Redis,MySQL,无法正确连接,地址占用问题)

Redis无法正确连接 在运行jar包时出现了这样的错误 查询得知问题核心在于Redis连接失败&#xff0c;具体原因是客户端发送了密码认证请求&#xff0c;但Redis服务器未设置密码 1.为Redis设置密码&#xff08;匹配客户端配置&#xff09; 步骤&#xff1a; 1&#xff09;.修…...

Web 架构之 CDN 加速原理与落地实践

文章目录 一、思维导图二、正文内容&#xff08;一&#xff09;CDN 基础概念1. 定义2. 组成部分 &#xff08;二&#xff09;CDN 加速原理1. 请求路由2. 内容缓存3. 内容更新 &#xff08;三&#xff09;CDN 落地实践1. 选择 CDN 服务商2. 配置 CDN3. 集成到 Web 架构 &#xf…...

CVE-2020-17519源码分析与漏洞复现(Flink 任意文件读取)

漏洞概览 漏洞名称&#xff1a;Apache Flink REST API 任意文件读取漏洞CVE编号&#xff1a;CVE-2020-17519CVSS评分&#xff1a;7.5影响版本&#xff1a;Apache Flink 1.11.0、1.11.1、1.11.2修复版本&#xff1a;≥ 1.11.3 或 ≥ 1.12.0漏洞类型&#xff1a;路径遍历&#x…...

STM32HAL库USART源代码解析及应用

STM32HAL库USART源代码解析 前言STM32CubeIDE配置串口USART和UART的选择使用模式参数设置GPIO配置DMA配置中断配置硬件流控制使能生成代码解析和使用方法串口初始化__UART_HandleTypeDef结构体浅析HAL库代码实际使用方法使用轮询方式发送使用轮询方式接收使用中断方式发送使用中…...

关于easyexcel动态下拉选问题处理

前些日子突然碰到一个问题&#xff0c;说是客户的导入文件模版想支持部分导入内容的下拉选&#xff0c;于是我就找了easyexcel官网寻找解决方案&#xff0c;并没有找到合适的方案&#xff0c;没办法只能自己动手并分享出来&#xff0c;针对Java生成Excel下拉菜单时因选项过多导…...