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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 2022年南京Java培训机构排名,实力突出遥遥领先

    2022年南京Java培训机构排名,实力突出遥遥领先2022年南京Java培训机构排名,实力突出遥遥领先近日,中国权威机构公布了2022年南京Java培训机构排名,本次排名第一的机构仍是动力节点,在2021年中,动力节点在Java培训机构排名中始终始名列前茅,那为什么动力节点在Java培训机构排名中始终名列前茅呢?一生只做一件事,动力节点为Java而生贵在专一多元化发展是人性的冲动,最容易干扰企业的方向。一个教育企业真正想要做大做强就要突破人骨子里的“贪婪”,专注到自己核心竞争力上,才会有不断提升持续进步的基础。动力节点从2009年成立至

    2022年10月3日
    5
  • mac 亿图11 激活码-激活码分享

    (mac 亿图11 激活码)JetBrains旗下有多款编译器工具(如:IntelliJ、WebStorm、PyCharm等)在各编程领域几乎都占据了垄断地位。建立在开源IntelliJ平台之上,过去15年以来,JetBrains一直在不断发展和完善这个平台。这个平台可以针对您的开发工作流进行微调并且能够提供…

    2022年3月27日
    622
  • qmake:变量手册

    qmake:变量手册qmake的基本行为受定义每个项目构建过程的变量声明的影响。1、ANDROID_ABIS此变量仅适用于Android目标。指定Android目标ABI列表。有效值为:armeabi-v7a、arm64-v8a、x86、x86_64。如:qmakeANDROID_ABIS=”armeabi-v7aarm64-v8a”2、ANDROID_API_VERSION此变量仅适用于Android目标。指定AndroidAPI级别编号。3、ANDROID

    2022年5月19日
    39
  • 基于51单片机智能小车的设计与实现转弯避障_基于单片机的智能小车设计

    基于51单片机智能小车的设计与实现转弯避障_基于单片机的智能小车设计0引言学习智能小车系统,有助于提高搭建系统的能力和对自动控制技术的理解。智能小车是一个较为完整的智能化系统,而智能化的研究已成为我国追赶世界科技水平的重要任务。智能小车有它特有的特点:成本低,涉及的知识面广,易于拓展[1]。整个智能小车系统作为一个完整的系统,从它的原理图的实现到实物的完成的过程,不仅需要深厚的电子方面的知识,还有对电路实现的良好掌握,对于培养学生的实践能力都有重要的意义。智能小车…

    2022年10月17日
    3
  • 实例分割算法_实例分割数据集制作

    实例分割算法_实例分割数据集制作实例分割COCO挑战赛http://cocodataset.org/#detection-leaderboardMaskScoringR-CNN2019-CVPR-华中科技大学-MaskScoringR-CNNMaskScoringR-CNN蒙版得分(maskscore)https://www.jiqizhixin.com/articles/2019-05-15-4代码(只针对COCO数据集)https://github.com/zjhuang22/masksc

    2022年8月23日
    10
  • Android studio安装教程[通俗易懂]

    Android studio安装教程[通俗易懂]Androidstudio安装教程傻瓜式教程如果想要彻底重装Androidstudio可以删除目录C:\Users\用户名中的以下几个文件夹。.android.gradle.Androidstudio(Androidstudio4.0版本之前才有)隐藏文件夹(Androidstudio4.0版本后才有)C:\Users\用户名\AppData\Roaming\Google\AndroidStudio4.1C:\Users\用户名\AppData\Local\Google\A

    2022年6月7日
    36

发表回复

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

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