解决VUE3项目部署后存在缓存页面不更新的问题

方法一:

找到项目中的index.html文件,在头部加上以下代码

<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-control" content="no-cache">
<meta http-equiv="Cache" content="no-cache">

若以上代码仍不能解决问题,请使用以下两种方法。

方法二:

此方法适用于路由为hash模式的情况下

找到配置文件,在文件vue.config.js中配置filenameHashing和output。

1.filenameHashing(关闭hash命名)

2.通过output配置filename和chunkFilename之后使得打包后生成的html中引入的js地址后面有版本号,由此触发更新,版本号可以是固定值。

注意:路径的配置因项目的配置而异,不要出错!

module.exports = defineConfig({transpileDependencies: true,lintOnSave: false,publicPath: "./",assetsDir: 'static',filenameHashing: false,configureWebpack: {output: {filename: `static/js/[name].js?v=1`,chunkFilename: `static/js/[name].js?v=1`}},
})   

打包后代码和浏览器中效果如下:

方法三:

此方法适用于路由为history模式的情况下

通过时间戳配置js文件名和css文件名,使得每次打包生成的文件名不同,从而触发更新。

注意:history模式需要服务器端的支持,若服务器端不支持,会出现404的现象。

const { defineConfig } = require('@vue/cli-service')
const Timestamp = new Date().getTime();module.exports = defineConfig({transpileDependencies: true,lintOnSave: false,publicPath: "./",assetsDir: 'static',configureWebpack: {output: {filename: `static/js/[name].${Timestamp}.js`,chunkFilename: `static/js/[name].${Timestamp}.js`}},css: { extract: { filename: `static/css/[name].${Timestamp}.css`,chunkFilename: `static/css/chunk.[id].${Timestamp}.css`,}}
}) 

以上方法效果因项目而异,要注意和其它配置项的关联。

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

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

相关文章

LeetCode 138. Copy List with Random Pointer【链表,DFS,迭代,哈希表】中等

本文属于「征服LeetCode」系列文章之一&#xff0c;这一系列正式开始于2021/08/12。由于LeetCode上部分题目有锁&#xff0c;本系列将至少持续到刷完所有无锁题之日为止&#xff1b;由于LeetCode还在不断地创建新题&#xff0c;本系列的终止日期可能是永远。在这一系列刷题文章…

【开发问题系列】CSV转Excel

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kuan 的首页,持续学…

MySQL5.7慢查询实践

总结 获取慢查询SQL 已经执行完的SQL&#xff0c;检查慢查询日志&#xff0c;日志中有执行慢的SQL正在执行中的SQL&#xff0c;show proccesslist;&#xff0c;结果中有执行慢的SQL 慢查询日志关键参数 名称解释Query_time查询消耗时间Time慢查询发生时间 分析慢查询SQL e…

python基础运用例子

python基础运用例子 1、⼀⾏代码交换 a , b &#xff1a;a, b b, a2、⼀⾏代码反转列表 l[::-1]3、合并两个字典 res {**dict1, **dict2}**操作符合并两个字典for循环合并dict(a, **b) 的方式dict(a.items() b.items()) 的方式dict.update(other_dict) 的方式 4、⼀⾏代码列…

蓝桥杯打卡Day2

文章目录 糖果分享游戏玛雅人的密码 一、糖果分享游戏IO链接 本题思路:本题是一道模拟题&#xff0c;最终需要每个人得到相同的糖果&#xff0c;那么此时我们开辟一个数组用来保存每个人分一半的结果&#xff0c;然后每个人都需要从左边拿到对方糖果&#xff0c;那么左边就是…

iPhone 15 Pro展示设计:7项全新变化呈现

我们不应该再等iPhone 15 Pro在苹果9月12日的“Wonderlust”活动上发布了&#xff0c;而且可能会有很多升级。有传言称&#xff0c;iPhone 15 Pro将是自iPhone X以来最大的飞跃&#xff0c;这要归功于大量的新变化&#xff0c;从带有更薄边框的新钛框架到顶级A17仿生芯片和动作…

SPI协议

文章目录 前言一、简介1、通信模式2、总线定义3、SPI通信结构4、SPI通讯时序5、SPI数据交互过程 二、多从机模式1、多NSS2、菊花链3、SPI通信优缺点4、UART、IIC、SPI 区别 三、总结四、参考资料 前言 SPI协议是我们的重要通信协议之一&#xff0c;我们需要掌握牢靠。 一、简介…

春秋云镜 CVE-2018-1000533

春秋云镜 CVE-2018-1000533 gitlist远程命令任意执行 靶标介绍 gitlist是一款使用PHP开发的图形化git仓库查看工具。在其0.6.0版本中&#xff0c;存在一处命令参数注入问题&#xff0c;可能导致远程命令执行漏洞 启动场景 漏洞利用 exp POST /example/tree/a/search HTTP/…

Rocky(Centos)安装中文字体(防止中文乱码)

1、查看字体列表 运行下列命令 fc-list 若出现&#xff0c;下面截图&#xff0c;则需要安装字体管理软件 安装字体库&#xff0c;运行&#xff1a; yum -y install fontconfig 当看到下图的提示信息时说明已安装成功&#xff1a; 二、添加中文字体 1&#xff09;window…

Matlab图像处理-巴特沃思低通滤波器

巴特沃思低通滤波器 巴特沃思低通滤波器又称作最大平坦滤波器。与理想滤波器不同的是&#xff0c;巴特沃斯低通滤波器的传递函数并没有给出明显截止的尖锐的不连续性。一阶巴特沃斯滤波器没有振铃现象&#xff0c;在二阶滤波器中&#xff0c;振铃现象通常很难察觉&#xff0c;…

nlp系列(7)实体识别(Bert)pytorch

模型介绍 本项目是使用Bert模型来进行文本的实体识别。 Bert模型介绍可以查看这篇文章&#xff1a;nlp系列&#xff08;2&#xff09;文本分类&#xff08;Bert&#xff09;pytorch_bert文本分类_牧子川的博客-CSDN博客 模型结构 Bert模型的模型结构&#xff1a; 数据介绍 …

【校招VIP】前端JavaScript语言之跨域

考点介绍&#xff1a; 什么是跨域&#xff1f;浏览器从一个域名的网页去请求另一个域名的资源时&#xff0c;域名、端口、协议任一不同&#xff0c;都是跨域。跨域是前端校招的一个重要考点&#xff0c;在面试过程中经常遇到&#xff0c;需要着重掌握。本期分享的前端算法考点之…