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


相关推荐

  • VS自带反编译DLL工具「建议收藏」

    VS命令提示符下输入ILDasm转载于:https://www.cnblogs.com/Impulse/p/4022413.html

    2022年4月12日
    40
  • css漂浮广告代码_html浮动窗口怎么做

    css漂浮广告代码_html浮动窗口怎么做1.html部分复制代码代码如下:blog_floatdiv.html我是浮动的div浮动的div浮动的div浮动的div浮动的div浮动的div浮动的div浮动的div浮动的div浮动的div浮动的div浮动的div浮动的div浮动的div浮动的div浮动的div浮动的div浮动的div浮动的div浮动的div浮动的div浮动的div浮动的div浮动的div浮动的div浮动的div浮动的div…

    2025年12月5日
    5
  • 数据挖掘项目的生命周期是指_数据挖掘生命周期的数据准备阶段

    数据挖掘项目的生命周期是指_数据挖掘生命周期的数据准备阶段 第一步:数据收集; 第二步:数据清理和转换;          目前有很多技术能用于数据清理和转换:           1、数据类型转换;          2、连续列转换;          3、分组;          4、聚集;          5、缺失值处理;          6、删除孤立点; 第三步:模型构建 

    2025年9月14日
    6
  • pycharm配置Python环境_手机虚拟环境怎么设置

    pycharm配置Python环境_手机虚拟环境怎么设置问题由来从github下载的模型程序,所适包的版本不同,导致Pycharm中包混乱、版本冲突。 为每个程序单独创建虚拟环境,使得特定程序只能访问虚拟环境中的包,从而保持全局解释器的干净整洁。创建虚拟环境File-Settings-PythonInterpreter-设置图标,后续设置如下:Pycharm之创建虚拟环境在特定虚拟环境中安装包1、选择下方Terminal2、利用cd进入项目的Scripts文件夹3、输入activate4、利用pip命…

    2022年8月26日
    8
  • 23、Camunda DMN决策初探

    23、Camunda DMN决策初探DMN 决策表初探 CamundaDMN 决策 Camunda 中使用 DMN 决策 CamundaDMN 案例创建学生分配班级审核流程创建决策开启流程 校长审核时 指定决策表中所需要的变量注意参考资料 CamundaDMN 决策 Camunda 中使用 DMN 决策 Camunda 支持 DMN1 3 版本 在 BPMN 业务活动流程中 可通过业务规则任务调用 DMN 决策 DMN 决策目的是想把业务代码和决策进行解耦 使决策分析人员只需关心决策即可 CamundaDMN 案例通过幼儿园学生年龄 age 和身高 height 分配

    2025年12月9日
    2
  • spring 中配置sessionFactory及用法

    spring 中配置sessionFactory及用法spring中配置sessionFactory及用法方法一:1、在Spring的applicationContext.xml中配置bean<!–启用注解注入–><c

    2022年7月2日
    27

发表回复

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

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