Vue 项目 强制清除浏览器的缓存

（1）最基本的方法就是，在打包的时候给每个打包文件加上hash 值，一般是在文件后面加上时间戳

?

1 2 3 4 5 6 7

//在vue.config.js 文件中，找到output： const Timestamp = new Date().getTime() output: { // 输出重构  打包编译后的 文件名称  【模块名称.版本号.时间戳】       filename: `[name].${process.env.VUE_APP_Version}.${Timestamp}.js`,       chunkFilename: `[name].${process.env.VUE_APP_Version}.${Timestamp}.js`       }

（2）在html 文件中加入meta 标签（不推荐此方法）

?

1 2 3

<meta http-equiv="pragram" content="no-cache"> <meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate"> <meta name="viewport" content="width=device-width,initial-scale=1.0">

（3）需要后端陪着，进行  nginx 配置　

?

1 2 3 4 5 6 7

location = /index.html {     add_header Cache-Control "no-cache, no-store"; } 原因： 第二种方法浏览器也会出现缓存，配置之后禁止html 出现缓存 no-cache, no-store可以只设置一个 no-cache浏览器会缓存，但刷新页面或者重新打开时 会请求服务器，服务器可以响应304，如果文件有改动就会响应200 no-store浏览器不缓存，刷新页面需要重新下载页面

（4）在脚本加载时加入一个时间戳，修改 webpack.prod.conf.js 文件。（未使用过该方法，需要实践）

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14

const version = new Date().getTime(); new HtmlWebpackPlugin({     filename: config.build.index,     template: 'index.html',     inject: true,     hash: version,     favicon: resolve('icon.ico'),     title: 'vue-admin-template',     minify: {         removeComments: true,         collapseWhitespace: true,         removeAttributeQuotes: true     } })