vue 强制清除浏览器缓存

vue 强制清除浏览器缓存(1)最基本的方法就是,在打包的时候给每个打包文件加上hash值,一般是在文件后面加上时间戳//在vue.config.js文件中,找到output:constTimestamp=newDate().getTime()output:{//输出重构打包编译后的文件名称【模块名称.版本号.时间戳】filename:`[name].${process.env.VUE_APP_Version}.${Timestamp}.js`,chunkFilen

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

(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.net/161108.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 查找(二)简单清晰的B树、Trie树具体解释

    查找(二)简单清晰的B树、Trie树具体解释

    2021年11月13日
    52
  • 国内比较好的OJ平台[通俗易懂]

    国内比较好的OJ平台[通俗易懂]OnlineJudge系统(简称OJ)是一个在线的判题系统。用户可以在线提交程序源代码,系统对源代码进行编译和执行,并通过预先设计的测试数据来检验程序源代码的正确性。北京大学POJhttp://poj.org/中国最受欢迎OJ之一,各式各样各种难度的题目都有。杭州电子科技大学HDUOJhttp://acm.hdu.edu.cn/中国最受欢迎OJ之一,题目数量多,来源广。UVAht…

    2022年6月15日
    63
  • git clone 指定分支 拉代码

    git clone 指定分支 拉代码gitclone指定分支拉代码

    2022年5月29日
    93
  • Js保留两位小数_前端小数点保留两位方法

    Js保留两位小数_前端小数点保留两位方法js保留两位小数的方法js保留两位小数的方法如下1、toFixed()方法需注意,保留两位小数,将数值类型的数据改变成了字符串类型2、Math.floor(),不四舍五入,向下取整注意,不改变数据类型3、字符串匹配注意,先将数据转换为字符串,最后再转为数值类型4、四舍五入保留2位小数(若第二位小数为0,则保留一位小数)注意,数据类型不变5、四舍五入保留2位小数(不够位数,则用0替补)注意,数据类…

    2022年8月10日
    9
  • 【赠书】深入浅出Python量化交易实战

    【赠书】深入浅出Python量化交易实战‍‍本书主要以国内A股市场为例,借助第三方量化交易平台,讲述了KNN、线性模型、决策树、支持向量机、朴素贝叶斯等常见机器学习算法在交易策略中的应用,同时展示了如何对策略进行回测,以便让读者…

    2022年10月18日
    2
  • Jenkins的主要作用

    Jenkins的主要作用说明:Jenkins折腾了好几个月了,打算写个系列记录下。有时间会尽量更新的。第一章Jenkins是什么?Jenkins 是一个可扩展的持续集成引擎。主要用于:l 持续、自动地构建/测试软件项目。l 监控一些定时执行的任务。Jenkins拥有的特性包括:l 易于安装-只要把jenkins.war部署到servlet容器,不需要数据库

    2022年5月31日
    42

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号