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

一、修改根目录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，你已经是最新的版本了

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

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