vue-cli4 项目打包防止缓存 项目版本升级防止缓存

----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[nam].${ timeStamp }.js`,
               chunkFilename: `js[nam].${ timeStamp }.js`,
		}
	},
	css: { //重点.
		extract:{ // 打包后css文件名称添加时间戳
		 	filename:`css/[name].${ timeStamp }.css`,
		 	chunkFilename:`css/[name].${ timeStamp }.css`,
		}
	}
};

原文链接：https://blog.csdn.net/zhaoletf/article/details/109050170