大家用vue脚手架搭建前端工程时，常被缓存问题所困扰，具体的表现就是，当程序版本升级时，用户因为缓存访问的还是老的页面，然后很多人很暴力的直接在index.html中加入了这几行代码：
<meta http-equiv="Expires" content="0">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-control" content="no-cache">
<meta http-equiv="Cache" content="no-cache">
由于vue脚手架每次打包时，都会将打出的静态资源文件名加个哈希后缀，且index.html中引入时也加了对应的哈希后缀，所以每个版本的静态资源都是全新的，不用担心因升级导致的缓存问题。那么只需让index.html不缓存，且让其他静态资源缓存，就能实现要求。
让静态资源有缓存好办，问题在于怎么只让index.html不缓存。这里我们已经不能单单靠前端代码来实现了，需要用到服务器配置。通过服务器配置，来单独设置请求index.html时的header，以达到控制缓存的目的。
如果你是Nginx：
Ngnix还是比较容易实现的，只需增加以下配置：
location = /index.html {
add_header Cache-Control "no-cache, no-store";
}
修改webpack的配置文件
configureWebpack: { // webpack 配置
output: { // 输出重构 打包编译后的 文件名称 【模块名称.版本号.时间戳】
filename: `static/js/[name].${process.env.VUE_APP_Version}.${Timestamp}.js`,
chunkFilename: `static/js/[name].${process.env.VUE_APP_Version}.${Timestamp}.js`
},
}
onst Timestamp = new Date().getTime();
// Vue.config.js 配置选项
module.exports = {
// publicPath:process.env.NODE_ENV === 'production' ? '/vue_workspac/aihuhuproject/' : '/',
//基本路径
publicPath: '/',//默认的'/'是绝对路径，如果不确定在根路径，改成相对路径'./'
// 输出文件目录
outputDir: 'dist',
assetsDir: 'static',
indexPath: 'index.html',
// eslint-loader 是否在保存的时候检查
lintOnSave: true,
// 生产环境是否生成 sourceMap 文件
productionSourceMap: false,
// css相关配置
css: {
// 是否使用css分离插件 ExtractTextPlugin
// extract: true,
// 开启 CSS source maps?
sourceMap: false,
},
// webpack-dev-server 相关配置
devServer: {
open: true,//open 在devServer启动且第一次构建完成时，自动用我们的系统的默认浏览器去打开要开发的网页
host: 'localhost',//默认是 localhost。如果你希望服务器外部可访问，指定如下 host: '0.0.0.0'，设置之后之后可以访问ip地址
port: 8080,
hot: true,//hot配置是否启用模块的热替换功能，devServer的默认行为是在发现源代码被变更后，通过自动刷新整个页面来做到事实预览，开启hot后，将在不刷新整个页面的情况下通过新模块替换老模块来做到实时预览。
https: false,
hotOnly: false,// hot 和 hotOnly 的区别是在某些模块不支持热更新的情况下，前者会自动刷新页面，后者不会刷新页面，而是在控制台输出热更新失败
proxy: {
'/api': {
target: 'http://localhost:8080', //目标接口域名
secure: false, //false为http访问，true为https访问
changeOrigin: true, //是否跨域
pathRewrite: {
'^/api': '' //重写接口
}
}
}, // 设置代理
before: app => { }
},
configureWebpack: { // webpack 配置
output: { // 输出重构 打包编译后的 文件名称 【模块名称.版本号.时间戳】
filename: `static/js/[name].${process.env.VUE_APP_Version}.${Timestamp}.js`,
chunkFilename: `static/js/[name].${process.env.VUE_APP_Version}.${Timestamp}.js`
},
},
// 第三方插件配置
pluginOptions: {
// ...
}
};
