vue 强制清除浏览器缓存

全栈程序员站长

发布于 2022-09-09 10:24:33

1.9K0

发布于 2022-09-09 10:24:33

大家好，又见面了，我是你们的朋友全栈君。

（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
    }
})

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/161108.html原文链接：https://javaforall.cn

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

java