Vue 项目 强制清除浏览器的缓存
(1)最基本的方法就是,在打包的时候给每个打包文件加上hash 值,一般是在文件后面加上时间戳
//在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 标签(不推荐此方法)
<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 配置
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
文件。(未使用过该方法,需要实践)
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 } })