vue中清除浏览器缓存得方法

vue中清除浏览器缓存得方法1.在HTTP协议中,只有后端返回expires或Cache-Control:max-age=XXX,前端才缓存。但在浏览器中,默认会对htmlcssjs等静态文件、以及重定向进行缓存,如果在HEAD头中指定:<HEAD> <METAHTTP-EQUIV=”Pragma”CONTENT=”no-cache”> <METAHTTP-EQUIV=”Cache-Control”CONTENT=”no-cache”> <METAHTTP-EQUIV

大家好,又见面了,我是你们的朋友全栈君。

1.在HTTP协议中,只有后端返回 expires 或 Cache-Control:max-age=XXX, 前端才缓存。
但在浏览器中,默认会对 html css js 等静态文件、以及重定向进行缓存,如果在HEAD头中指定:

<HEAD>
	<METAHTTP-EQUIV="Pragma"CONTENT="no-cache">
	<METAHTTP-EQUIV="Cache-Control"CONTENT="no-cache">
	<METAHTTP-EQUIV="Expires"CONTENT="0">
</HEAD>

这种方法浏览器不会缓存html,但是还是会对重定向缓存,并且这种方式并不规范,可能有的浏览器不支持。

2.最常用的方法就是,在打包的时候给每个打包文件加上hash 值,一般是在文件后面加上时间戳或者随机数
//在vue.config.js 文件中,找到output:

const Timestamp = new Date().getTime()
output: { 
    // 输出重构 打包编译后的 文件名称 【模块名称.版本号.时间戳】
	filename: `[name].${ 
     process.env.VUE_APP_Version}.${ 
     Timestamp}.js`,
	chunkFilename: `[name].${ 
     process.env.VUE_APP_Version}.${ 
     Timestamp}.js`
}

3.在脚本加载时加入一个时间戳,修改 webpack.prod.conf.js 文件。(未使用过该方法,需要实践)

const version = new Date().getTime();
new HtmlWebpackPlugin({ 
   
	filename: config.build.index,
	template: 'index.html',
	inject: true,
	hash: version,
	favicon: resolve('icon.ico'),
	title: 'vue-admin-template',
	minify: { 
   
		removeComments: true,
		collapseWhitespace: true,
		removeAttributeQuotes: true
	}
})
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/161157.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • tcp 校验和_tcp如何保证有序

    tcp 校验和_tcp如何保证有序1.tcp校验和接收方在接收数据时检验数据包在传输过程中是否改变的验证方式发送方将数据体取反码,检验和也取反码相加,高于4bit的和低于4bit的相加,得到的就是校验和,保存在tcp头的校验和字段,接收方将数据取反码,校验和取反码,相加为1111则数据包没有异常,否则丢弃数据包。参考此文2.为什么Internet协议:IP,ICMP,IGMP,UDP,TCP收到有…

    2022年10月29日
    0
  • OleDbCommand 的 用法

    OleDbCommand 的 用法OleDbConnection用法con=newOleDbConnection(“Provider=Microsoft.Jet.OLEDB.4.0;datasource=data.mdb”);con.Open();OleDbCommanddc=newOleDbCommand(“selectnamefromuswhereid=2”,con);textBox1.T

    2022年5月19日
    65
  • 数据仓库和数据集市详解:ODS、DW、DWD、DWM、DWS、ADS「建议收藏」

    数据仓库和数据集市详解:ODS、DW、DWD、DWM、DWS、ADS「建议收藏」@TOC数据流向应用示例何为数仓DWDatawarehouse(可简写为DW或者DWH)数据仓库,是在数据库已经大量存在的情况下,它是一整套包括了etl、调度、建模在内的完整的理论体系。数据仓库的方案建设的目的,是为前端查询和分析作为基础,主要应用于OLAP(on-lineAnalyticalProcessing),支持复杂的分析操作,侧重决策支持,并且提供直观易懂的查询结果。目前行业比较流行的有:AWSRedshift,Greenplum,Hive等。数据仓库并不是数据的最终目的地

    2022年6月26日
    97
  • branch_git fetch

    branch_git fetch问:Igoogledandreadmanyposts,butnonecouldmakemeunderstandthebranchdivergenceproblemyet.IfI’veremotetrackingbranch,Ioftengetintothefollowing:$gitstatus#Onbranch

    2022年10月26日
    0
  • HTML背景图片设置

    HTML背景图片设置背景:学习前端知识,自己做页面目的:学习前端知识组网图:不涉及工具:vscode1.41.0简介:HTML背景图片设置;HTML背景图片设置background-image:<!DOCTYPEhtml><htmllang=”en”><head><metacharset=”UTF-8″><title&gt…

    2022年5月31日
    36
  • word-embedding_open compound word

    word-embedding_open compound wordWordEmbedding之CBOWCBOW模型结构准备文字数字化构建损失函数基于RNN的方法基于CBOW的方法CBOWCBOW是一个非常优秀的WordEmbedding模型,其原理非常简单,本文章尝试深入模型内部,探索这个模型的性能和表现。模型结构准备再介绍模型的网络结构之前,首先要介绍的是一个向量计算。假定特征为,x=(x0,x1,⋯&amp;amp;amp;amp;amp;ThinSpace;,xn−1…

    2022年9月3日
    2

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号