解决vue项目打包部署后，浏览器缓存旧版问题，添加自动清除缓存

问题描述

每次前端更新后，浏览器需要强制清除缓存(Ctrl+F5)才会生效新代码。

---

解决方案：

vue.config.js 配置中，css、js打包文件添加版本号时间戳，每次打包后，版本号都会改变。

const timestamp  = new Date().getTime();
module.exports = {
	css: {
	    // 输出重构 打包编译后的css文件名称，添加时间戳
	    //注意这个地址路径根据实际项目文件存放路径来填写，一般打包后都是在static文件夹下,如果不确定，先打包没有修改过的目录结构看一下。
	    extract: {
	      filename: `static/css/[name].css?v=${timestamp}`,
	      chunkFilename: `static/css/[name].css?v=${timestamp}`,
	    },
	}
	configureWebpack: {
	    output: {
	      filename: `static/js/[name].js?v=${timestamp}`,
	      chunkFilename: `static/js/[name].js?v=${timestamp}`,
	    }
	}
}

打包后的文件结构

---

效果