问题描述：项目(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的时间格式。