vue 删除页面缓存_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 标签(不推荐此方法)

(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

}

})