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
	}
})
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

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

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 走过2011—年终总结

    走过2011—年终总结

  • java responsebody_@ResponseBody 详解「建议收藏」

    java responsebody_@ResponseBody 详解「建议收藏」@ResponseBody的作用其实是将java对象转为json格式的数据。@responseBody注解的作用是将controller的方法返回的对象通过适当的转换器转换为指定的格式之后,写入到response对象的body区,通常用来返回JSON数据或者是XML数据。注意:在使用此注解之后不会再走视图处理器,而是直接将数据写入到输入流中,他的效果等同于通过response对象输出指定格式的数据…

  • 2020最新eclipse安装教程,配有每一步的安装过程和细节!「建议收藏」

    2020最新eclipse安装教程,配有每一步的安装过程和细节!「建议收藏」已经下过好几次了,现在还是忘了。就把过程直接放上面了。下次再换电脑就直接可以看。。。1.先到官网下载:下载地址:https://www.eclipse.org/downloads/

  • toast弹窗的用法_vue弹出提示框

    toast弹窗的用法_vue弹出提示框效果图代码<!DOCTYPEhtml><htmllang=”en”> <head> <title>弹窗</title> <metacharset=”UTF-8″> <metaname=”viewport”content=”width=device-width,initial-sc…

  • 数据结构Elemtype「建议收藏」

    数据结构Elemtype「建议收藏」在C语言数据结构中,关于数据元素的类型定义均用“ElemTypee;”来表示,其中e是表示数据元素的变量,而ElemType则是它的类型,ElemType的含义就是“数据元素的类型”,是一个抽象的概念,是表示我们所要使用的数据元素应有的类型。ElemType是数据结构上为了说明问题而用的一个词。它是elementtype(“元素的类型”)的简化体。因为数据结构是讨论抽象的数据结构…

  • 一、Windows安装Git[通俗易懂]

    一、Windows安装Git[通俗易懂]工欲善其事必先利其器,工作中在使用Git之前,最先做的一件事就是安装它,但是因为不同的开发需求,工作中可能会用到的系统不一样,有使用Linux的,有使用Mac的,也有使用Windows的。不过Git在这几个系统中都有比较好的支持,只要能够进行正确的安装和配置都可以正常使用Git,下面直接进入主题。#Windows安装Git1、百度搜索Git直接点击图中箭头指向的链接,进入Git客户端下载的网站选择Windows,进入版本选择页面注意这里Git客户端分为普通安装版和便携版本,便携版本也就是上

发表回复

您的电子邮箱地址不会被公开。

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