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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 网络安全自学笔记(网络安全笔记300字)

    目录WEB(应用)安全前端安全xss攻击后端安全文件上传漏洞WebShell解析安全数据安全sql注入通信安全WEB(应用)安全前端安全xss攻击后端安全文件上传漏洞WebShell解析安全数据安全sql注入网络安全-sqlmap学习笔记通信安全网络-http协议学习笔记(消息结构、请求方法、状态码等)…

    2022年4月16日
    43
  • WKT解读

    WKT-概念WKT(Well-knowntext)是一种文本标记语言,用于表示矢量几何对象、空间参照系统及空间参照系统之间的转换。它的二进制表示方式,亦即WKB(well-knownbinary)则胜于在传输和在数据库中存储相同的信息。该格式由开放地理空间联盟(OGC)制定。WKT-几何对象WKT可以表示的几何对象包括:点,线,多边形,TIN(不规则三角网)及多…

    2022年4月3日
    99
  • File.createTempFile异常「建议收藏」

    错误:File.createtempfilejava.io.winntfilesystem.createfileexclusively(nativemethod)原来是Eclipse默认的JRE不是JDK下的修改为JDK下的jre就可以了转载于:https://www.cnblogs.com/cszzy/archive/2012/12/28/2837790.html…

    2022年4月11日
    105
  • Android图形动画 使用ScaleAnimation

    Android图形动画 使用ScaleAnimation使用ScaleAnimation实现了一个类似于翻转的动画效果。感觉ScaleAnimation算是一个比较好用的动画类了,看了一下API感觉方法和构造方法也都很简单。就不再赘述太多直接上代码吧– 第一步:准备两张照片,放置在res/drawble下。首先在layout中写好布局文件,这里要用framelayout布局,让两张图片一张覆盖在另一张上。相信聪明的你…

    2022年8月31日
    3
  • 九个问题从入门到熟悉HTTPS

    九个问题从入门到熟悉HTTPS

    2022年3月12日
    43
  • BM3D算法「建议收藏」

    BM3D算法「建议收藏」BM3D(Block-matchingand3Dfiltering,3维块匹配滤波)2007-TIP-Imagedenoisingbysparse3Dtransform-domaincollaborativelteringNL-means(空间域处理)非局部均值算法p像素的值的大小就应该为q1q2q3每个与p对应房间(像素)值的加权平均,这样就对P图像斑块完成了降噪的过程,类似一个基于大斑块的高斯滤波算法。BM3D把空间域和变换域的降噪方法结合起来BM3D该..

    2022年6月7日
    50

发表回复

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

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