vue项目打包部署后 浏览器自动清除缓存问题(解决方法)

vue打包部署后 浏览器缓存问题,导致控制台报错ChunkLoadError: Loading chunk failed的解决方案

一、报错如下:

每次build打包部署到服务器上时,偶尔会出现前端资源文件不能及时更新到最新,浏览器存在缓存问题,这时在当前页面进行按钮点击等事件处理时,控制台报错chunk load error,如下显示:
在这里插入图片描述
原因:通过查看当前sources里的文件,可以发现:控制台报错提示中所请求的js文件哈希值跟sources缓存的文件哈希值并不一样,说明 当前页面请求了缓存,然而由于资源文件被更新 导致找不到 出现404的情况。

直接解决办法:清除浏览器缓存。(但是每次部署 都要让用户重新清一次缓存不是很友好)下面通过其他方式解决这个问题。

二、解决:

1、在index.html入口文件处设置meta标签,清除页面缓存。
在这里插入图片描述

<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">

2、vue.config.js 配置js、css打包配置,在css、js打包文件添加版本号时间戳,区别版本

const path = require('path')
const timeStamp= new Date().getTime()
const isPro = process.env.NODE_ENV === 'production'
module.exports = {configureWebpack: {output: {filename: `js/[name].js?v=${timeStamp}`,chunkFilename: `js/[name].js?v=${timeStamp}`,},},css: {// 输出重构 打包编译后的css文件名称,添加时间戳extract: {filename: `css/[name].${timeStamp}.css`,chunkFilename: `css/[name].${timeStamp}.css`,},}
}

这样每次打包出来的js文件都不一样,也就解决了浏览器的缓存问题。

Tips

filename: 指列在 entry(入口) 中,打包后输出的文件的名称
chunkFilename: 指未列在 entry 中,却又需要被打包出来的文件的名称(懒加载的文件)

3.打包测试

在这里插入图片描述
发现 JS 后参数带上我设置的时间戳啦,测试成功。

清除浏览器 localStorage 缓存

1、更新package.json中的 version 值,每次打包往上递增
2、main.js中,根据 version 判断是否进行缓存清理

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)location.reload()
}

Tips

有时版本不一样,可以找webpack.prod.conf文件进行修改噢~

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

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

相关文章

Pandas数据可视化详解:大案例解析(第27天)

系列文章目录 Pandas数据可视化解决不显示中文和负号问题matplotlib数据可视化seaborn数据可视化pyecharts数据可视化优衣库数据分析案例 文章目录 系列文章目录前言1. Pandas数据可视化1.1 案例解析&#xff1a;代码实现 2. 解决不显示中文和负号问题3. matplotlib数据可视化…

ListBox自动滚动并限制显示条数

1、实现功能 限制ListBox显示的最大条数&#xff1b; ListBox自动滚动&#xff0c;显示最新行&#xff1b; 2、C#代码 using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.IO; using Syst…

JUC并发编程基础(包含线程概念,状态等具体实现)

一.JUC并发编程基础 1. 并行与并发 1.1 并发: 是在同一实体上的多个事件是在一台处理器上"同时处理多个任务"同一时刻,其实是只有一个事件在发生. 即多个线程抢占同一个资源. 1.2 并行 是在不同实体上的多个事件是在多台处理器上同时处理多个任务同一时刻,大家…

【C++】main函数及返回值深度解析

一.main函数介绍 1.main函数怎么写 #include <iostream>int main() {// 程序的代码放在这里std::cout << "Hello, World!" << std::endl;return 0; }在这个例子中&#xff1a; #include <iostream> 是预处理指令&#xff0c;它告诉编译器…

在昇腾服务器上使用llama-factory对baichuan2-13b模型进行lora微调

什么是lora微调 LoRA 提出在预训练模型的参数矩阵上添加低秩分解矩阵来近似每层的参数更新&#xff0c;从而减少适配下游任务所需要训练的参数。 环境准备 这次使用到的微调框架是llama-factory。这个框架集成了对多种模型进行各种训练的代码&#xff0c;少量修改就可使用。 …

小红书矩阵系统源码:赋能内容创作与电商营销的创新工具

在内容驱动的电商时代&#xff0c;小红书凭借其独特的社区氛围和用户基础&#xff0c;成为品牌营销和个人创作者不可忽视的平台。小红书矩阵系统源码&#xff0c;作为支撑这一平台的核心技术&#xff0c;提供了一系列的功能和优势&#xff0c;助力用户在小红书生态中实现更高效…

Windows 安装hadoop 3.4

目录 安装 下载 设置环境变量 配置 修改&#xff1a;hadoop-env.cmd 修改&#xff1a;core-sit.xml 修改&#xff1a;hdfs-site.xml 修改&#xff1a;mapred-site.xml 修改&#xff1a;yarn-site.xml 运行 格式化HDFS文件系统 启动&#xff1a;hadoop 启动&#xf…

python-21-零基础自学python 写了一个彩票 发现买彩票中了真的是天选

学习内容&#xff1a;《python编程&#xff1a;从入门到实践》第二版 知识点&#xff1a; from random import choice、choice&#xff08;&#xff09;函数用法、while循环 练习内容&#xff1a; 练习9-14&#xff1a;彩票 创建一个列表或元组&#xff0c;其中包含10个数…

【HTML学习笔记】

HTML学习笔记 可以把以下代码复制于记事本或者VSCode中&#xff0c;保存时文件名尾缀.html&#xff0c;直接打开.html文件后&#xff0c;在浏览器中摁F12键&#xff0c;就可以一边看代码一边看效果对比看啦&#xff01; <!DOCTYPE html> <html lang"en">…

JAVA基础知识(上)

# 一、说说&和&&的区别? 作为运算符&#xff1a;& 将二进制的每一位进行与运算 作为逻辑运算符&#xff1a;两者都是与&#xff0c;&& 如果左边为假则终止右边运算&#xff0c;即短路运算。& 则需要把两边的比较执行完 # 二、int和Integer的区…

Vue 中实现动态右键菜单

在前端开发中&#xff0c;自定义右键菜单是一种常见的交互方式&#xff0c;它能够为用户提供更多的功能选项。在本文中&#xff0c;将探讨如何在 Vue 中实现一个动态右键菜单&#xff0c;该菜单能够根据用户点击位置动态调整其显示位置&#xff0c;确保菜单始终在浏览器窗口的可…

Steam平台的辉煌轨迹:数字游戏革命的领航者

在数字世界的浩瀚星空中&#xff0c;有一颗恒星以其耀眼的光芒照亮了无数游戏爱好者的道路&#xff0c;它就是Valve公司的杰作——Steam平台。自2003年横空出世以来&#xff0c;Steam不仅颠覆了传统游戏分发的模式&#xff0c;更以其卓越的创新能力和前瞻性的战略眼光&#xff…

CSS - 深入理解选择器的使用方式

CSS基本选择器 通配选择器元素选择器类选择器id 选择器 通配选择器 作用&#xff1a;可以选中所有HTML元素。语法&#xff1a; * {属性名&#xff1b;属性值; }举例&#xff1a; /* 选中所有元素 */ * {color: orange;font-size: 40px; }在清除样式方面有很大作用 元素选择器…

JAVA基础知识(下)

一、String相关面试题 1. 为什么 String 在 java 中是不可变的? - 如果不是不可变的&#xff1a;这种情况根本不可能&#xff0c;因为在字符串池的情况下&#xff0c;一个字符串对象/文字&#xff0c;例如 “Test” 已被许多参考变量引用&#xff0c; 因此如果其中任何一个更…

ubuntu下载Nginx

一、Nginx下载安装&#xff08;Ubuntu系统&#xff09; 1.nginx下载 sudo apt-get install nginx2.nginx启动 启动命令 sudo nginx重新编译(每次更改完nginx配置文件后运行&#xff09;&#xff1a; sudo nginx -s reload3.测试nginx是否启动成功 打开浏览器访问本机80端口…

小酌消烦暑|人间正清欢

小暑是二十四节气之第十一个节气。暑&#xff0c;是炎热的意思&#xff0c;小暑为小热&#xff0c;还不十分热。小暑虽不是一年中最炎热的时节&#xff0c;但紧接着就是一年中最热的节气大暑&#xff0c;民间有"小暑大暑&#xff0c;上蒸下煮"之说。中国多地自小暑起…

openssh版本升级实战(修补ssh漏洞)基于RedHat8.4版本测试--已成功升级

升级前具有漏洞的的版本 通过命令查看目前系统的ssh和sshd版本&#xff1a; ssh -V sshd -V 注意&#xff1a;由于ssh是远程连接服务器的功能&#xff0c;在进行下面操作升级openssh前&#xff0c;请打开多个连接会话保持&#xff0c;如升级失败&#xff0c;可通过已连接的会话…

antd实现简易相册,zdppy+vue3+antd实现前后端分离相册

前端代码 <template><a-image:preview"{ visible: false }":width"200"src"http://localhost:8889/download/1.jpg"click"visible true"/><div style"display: none"><a-image-preview-group:previe…

粤港澳大湾区人工智能资本对接会”成功举办!

为促进惠州仲恺高新区人工智能产业的发展&#xff0c;推动惠深两地产业资源深度协同与合作&#xff0c;也为吸引更多的优质项目与投融资机构为惠州仲恺高新区产业发展注入动力&#xff0c;加速深圳人工智能相关产业资源落地仲恺。2024年06月26日&#xff0c;由仲恺高新区科技创…

GNU/Linux - wic文件的使用

Yocto/OpenEmbedded使用的磁盘镜像格式是 wic。为嵌入式系统提供 bootable images。 The disk image format used in the Yocto Project is wic. .wic 文件显然只是一个带有分区表和分区的磁盘镜像&#xff0c;就像下载 Linux 发行版时获得的所有 .img 文件一样。这就是为什么你…