本文主要是介绍Vue/cli2 || /cli3部署上线清理浏览器缓存，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
问题描述：项目(vue /cli2 || vue /cli3) 部署上线用浏览器打开后依旧是上一个版本
问题原因：浏览器的缓存机制（分为强缓存和协商缓存）
强缓存：不在客户端存储资源，始终去原始服务器获取资源
协商缓存：向后端发起请求，看服务器资源是否更新，如果没有更新就返回304，如果更新了就返回200
no-cache 和 no-store 都是 HTTP 协议头 Cache-Control 的值。区别是：
no-store
彻底禁用缓存，所有内容都不会被缓存到缓存或临时文件中。
no-cache
可以在客户端存储资源，每次都必须去服务端做新鲜度校验，来决定从服务端获取新的资源（200）还是使用客户端缓存（304）。也就是所谓的协商缓存
除了 no-cache 和 no-store，Cache-Control 头的取值还有：
public
所有内容都将被缓存（客户端和代理服务器都可缓存）
private
内容只缓存到私有缓存中（仅客户端可以缓存，代理服务器不可缓存）
max-age=xxx
缓存的内容将在 xxx 秒后失效，这个选项只在 HTTP1.1 可用，并如果和 Last-Modified 一起使用时，优先级较高。
一、修改根目录index.html，添加以下代码
于 HEAD 标签内直接添加 META 标签：
1.）本人所在项目采用得这个
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
2.）如果不想彻底禁止缓存可以采用下面的
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="expires" content="0" />
二、nginx设置不缓存 html
（nginx设置后，每次刷新页面加载时间太长，所以我所在项目未使用）
1.）在nginx.conf文件做设置:增加add_header Cache-Control "no-cache, no-store
location = /index.html {root /usr/webkit/dist;add_header Cache-Control "no-cache, no-store";
}
2.）或者直接在 location / 这里增加add_header Cache-Control "no-cache, no-store
server {location / {root /usr/webkit/dist;index index.html index.htm;add_header Cache-Control "no-cache, no-store";}
}
三、打包的文件路径添加时间戳
1.)vue-cli2.x 创建的项目里，找到 build/webpack.prod.conf.js 文件
//获取当前时间戳
const version = new Date().getTime();
//将时间戳加入output中
output: {...config.output,filename: utils.assetsPath(`js/[name].[chunkhash].${version}.js`),chunkFilename: utils.assetsPath(`js/[id].[chunkhash].${version}.js`)
},//css文件名加时间戳
new ExtractTextPlugin({filename: utils.assetsPath(`css/[name].[contenthash].${version}.css`),allChunks: true,
}),
2.）在 vue-cli3.x 创建的项目里，打开 vue.config.js 文件
const version = new Date().getTime();
module.exports = {configureWebpack: {output: { filename: `js/[name].[chunkhash].${version}.js`,chunkFilename: `js/[id].[chunkhash].${version}.js`}}
}
或者
const version = new Date().getTime();
module.exports = {configureWebpack: config =>{ if(process.env.NODE_ENV === "production"){Object.assign(config,{output: { ...config.output,filename: `static/js/[name].[chunkhash].${version}.js`,chunkFilename: `static/js/[name].[chunkhash].${version}.js`}})}}
}
四、location.reload() 重新加载当前文档
（这是同事提供的方法，本人未使用，但是有采取性）
如果index.html 设置了不允许缓存，每次刷新时，就会重新加载资源，可能会造成响应过慢的现象。所以引入了一种新的方案：
1.）在package.json文件每次打包时改变一下version；
2.）在main.js文件中，加入如下代码：
const VUE_VERSION = require('../package.json').version
const V_VER = window.localStorage.getItem("vueVersion");
if(VUE_VERSION != V_VER){localStorage.clear()window.localStorage.setItem("vueVersion", VUE_VERSION );location.reload()
}
五、HTML中的Meta标签
根据HTML语言标准注释：meta标签是对网站发展非常重要的标签，它可以用于鉴别作者，设定页面格式，标注内容提要和关键字，以及刷新页面等等。
HTTP-EQUIV类似于HTTP的头部协议，它回应给浏览器一些有用的信息，以帮助正确和精确地显示网页内容。
1.expires(期限)
说明：可以用于设定网页的到期时间。一旦网页过期，必须到服务器上重新调阅。
用法：
`<META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">`
注意：必须使用GMT的时间格式。
2.Pragma(cach模式)
说明：禁止浏览器从本地机的缓存中调阅页面内容。
用法：
`<META HTTP-EQUIV="Pragma" CONTENT="no-cache">`
注意：这样设定，访问者将无法脱机浏览。
3.Refresh(刷新)
说明：需要定时让网页自动链接到其它网页的话，就用这句了。
用法：
`<META HTTP-EQUIV="Refresh" CONTENT="5;URL=http://www.baidu.com">`
注意：其中CONTENT="5;URL=http://www.baidu.com"的5是指停留5秒钟后自动刷新到URL网址。
下面标签作用是20秒自动刷新当前页面：
<meta http-equiv="refresh" content="20" />
4.Set-Cookie(cookie设定)
说明：如果网页过期，那么存盘的cookie将被删除。
用法：
<META HTTP-EQUIV="Set-Cookie" CONTENT="cookievalue=xxx;
expires=Wednesday, 21-Oct-98 16:14:21 GMT; path=/">
注意：必须使用GMT的时间格式。
这篇关于Vue/cli2 || /cli3部署上线清理浏览器缓存的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
