Vue打包后自动清除浏览器缓存

Mark XLII

已于 2023-11-29 18:27:52 修改

阅读量1.1k

点赞数

文章标签： vue.js 前端 javascript

于 2023-11-29 18:26:59 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_52429122/article/details/134696461

版权

文章介绍了如何在项目中修改index.html并添加元标签以控制缓存，通过Last-Modified和ETag的故事形式讲解了浏览器与服务器如何通过这些机制进行资源更新检测，帮助读者理解协商缓存的概念。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、修改根目录index.html

1.找到当前项目的index.html页面，并在 head 里面添加下面代码

在这里插入图片描述

二、打包的文件路径添加时间戳

1、找到当前项目的build/webpack.prod.conf.js 文件，配置打包文件
在这里插入图片描述

三、附代码

<meta http-equiv="pragram" content="no-cache">

 <meta http-equiv="Expires" content="0">

 <meta http-equiv="Cache-control" content="no-cache, no-store, must-revalidate">

小故事大道理

上文对整个概念做了阐述，还是不够形象，我们来通过几个小故事生动理解一下：

故事一：Last-Modified

浏览器：Hi，我需要 jartto.min.js 这个文件，如果是在 Last-Modified: Fri Feb 15 2019 19:57:31 GMT 之后修改过的，请发给我。

服务器：（检查文件的修改时间）

服务器：Oh，这个文件在那个时间之后没有被修改过，你已经有最新的版本了。

浏览器：太好了，那我就显示给用户了。

故事二：ETag

浏览器：Hi，我需要 jartto.css 这个文件，有没有不匹配 3c61f-1c1-2aecb436 这个串的

服务器：（检查 ETag…）

服务器：Hey，我这里的版本也是 3c61f-1c1-2aecb436，你已经是最新的版本了

浏览器：好，那就可以使用本地缓存了

看完这两个小故事，是否对协商缓存有了更清晰的认识了。