----vue项目打包之浏览器存在缓存问题----
每次项目版本升级之后都是需要浏览器手动清理缓存.这个用户体验太差,所以需要在项目中设置好,之前在网上搜索了很多都是vue-cli 3.0版本的缓存处理.所以想记录一下vue-cli 4.0 如何处理缓存问题.
总结了一下大体分为三点

1. 修改请求头,设置Cache-Control: no-store 禁止文件缓存.
2. 修改服务器端的nginx,不让index.html缓存
3. webpack打包的时候给js . css文件添加时间戳,保证每个版本文件的唯一性.

上面两条的话网上都有很多的教程,而第3条网上搜索到的大多数是修改vue-cli3.0的,所以3.0给文件添加时间戳的方法我就没有在记载,下面记载的是vue-cli 4.0之后如何操作的.

一: 在入口文件index.html添加

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

在Chrome中，设置Cache-Control为no-store，可以防止页面被放在cache中，这样可以直接去请求服务器，但是Cache-Control为no-cache，对Chrome不能起到作用，但是对于IE浏览器而言，设置Cache-Control为no-store和no-cache均可以发挥作用，同时对于搜狗和Firefox浏览器而言，将Cache-Control为no-store均可以达到不设置缓存的目的，一定要注意
二:修改 /conf/nginx.conf 配置文件，让index.html不缓存，同时记得重启nginx

	location = /index.html {
	     add_header Cache-Control "no-cache, no-store";
    }

三: 给打包的js名文件添加时间戳.
只需要修改一下vue.config.js文件.而下面的代码大家只需要注意configureWebpack 与 css 两个对象下面的设置即可,别的代码我没有添加 .

const path = require(“path”); // 获取当前的时间戳
let timeStamp = new Date().getTime();
module.exports = {
	filenameHashing:false, // 打包的时候不使用hash值.因为我们有时间戳来确定项目的唯一性了.
   // 
   configureWebpack: {    //重点
	    output: { // 输出重构 打包编译后的js文件名称,添加时间戳.
             filename: `js[name].${ timeStamp }.js`,
               chunkFilename: `js[nam].${ timeStamp }.js`,
		}
	},
	css: { //重点.
		extract:{ // 打包后css文件名称添加时间戳
		 	filename:`css/[name].${ timeStamp }.css`,
		 	chunkFilename:`css/[name].${ timeStamp }.css`,
		}
	}
};

以上是我一周来对于vue-cli 4.0 版本打包的理解.仅供参考,如果有错误的地方请大家留言,我在继续改正.