项目上线后，针对使用频繁的功能模块，比如请假，加班的新增以及编辑内容涉及到数据逻辑的处理的时候，你会发现浏览器缓存的问题非常的严峻，总不能一直告诉用户要清理缓存吧，这个时候前台开发人员就需要即使做优化，一个通常的处理的办法就通过时间戳解决。index.html文件在服务器端可能被缓存，css，js同样如此，以下是一种解决方案
第一步在修改public文件夹内index.html的内容
<head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"><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"><link rel="icon" href="<%= BASE_URL %>favicon.ico"></head>
第二步，修改vue.config.js文件
注意css配置项跟configureWebpack是并列关系
configureWebpack: {output: { // 输出重构 打包编译后的js文件名称,添加时间戳.filename: `js/js[name].${timeStamp}.js`,chunkFilename: `js/chunk.[id].${timeStamp}.js`},// 关闭 webpack 的性能提示performance: {hints: false},name: name,resolve: {alias: {'@': resolve('src')}}},css: { // 重点.extract: { // 打包后css文件名称添加时间戳filename: `css/[name].${timeStamp}.css`,chunkFilename: `css/chunk.[id].${timeStamp}.css`}},
第三步：修改nginx（nginx.conf中配置）中配置不缓存index文件的内容
if ($request_filename ~* ^.*?.(html|htm)$) {add_header Cache-Control "private, no-store, no-cache, must-revalidate, proxy-revalidate";}
配置就完毕了，重新打包部署服务器即可。
