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


相关推荐

  • Ubuntu安装nginx_服务器安装Ubuntu

    Ubuntu安装nginx_服务器安装Ubuntu版本ubunt16.04nginx-1.8.1gcc-4.8.4pcre-8.38zlib-1.2.11openssl-1.0.2n前置环境配置进入到/usr/local目录下执行下面1234,此处路劲与之后安装nginx对应,需要注意*1、gcc源码编译依赖环境apt-getinstallbuild-essentialapt-

    2022年9月18日
    3
  • 从华为清理34岁以上老员工想起的二三事

    从华为清理34岁以上老员工想起的二三事最近网上盛传华为清理34岁老员工的消息,不管“我司”辟谣与否,根据最近突然有多名同事跟我咨询招聘消息的情况来看,公司内部确实在进行一轮裁员工作,而且影响面比较大,一代华为人或多或少受到影响。最早看到相关消息是在朋友圈转发的一篇文章上,说到强制退休一名42岁和辞退一名39岁的老员工。从我十几年前刚进华为的时候就一直有45岁内部退休的传言,退休后能够保留股票,但是因为当时华为平均年龄很小,周围几乎

    2022年7月17日
    39
  • MySQL concat函数的使用

    MySQL concat函数的使用MySQLconcat函数是MySQL数据库中众多的函数之一,下文将对MySQLconcat函数的语法和使用进行说明,供您参考和学习。MySQLconcat函数使用方法:CONCAT(str1,str2,…) 返回结果为连接参数产生的字符串。如有任何一个参数为NULL,则返回值为NULL。注意:如果所有参数均为非二进制字符串,则结果为非二进制字符串。 

    2022年6月6日
    85
  • vscode引入vue_vscode配置vue开发环境

    vscode引入vue_vscode配置vue开发环境vs导入vue项目renren-fast-vue使用

    2022年7月28日
    4
  • 架构设计(1)-谈谈架构

    架构设计(1)-谈谈架构1、什么是架构和架构本质在软件行业,对于什么是架构,都有很多的争论,每个人都有自己的理解。此君说的架构和彼君理解的架构未必是一回事。因此我们在讨论架构之前,我们先讨论架构的概念定义,概念是人认识这个世界的基础,并用来沟通的手段,如果对架构概念理解不一样,那沟通起来自然不顺畅。Linux有架构,MySQL有架构,JVM也有架构,使用Java开…

    2022年7月11日
    29
  • 数组求和方法汇总_用函数的方法对输入的数组求和

    数组求和方法汇总_用函数的方法对输入的数组求和vararr=[1,2,3,4,5,6];测试时我不想过度使用全局变量影响命名空间,所以没使用未声明变量。而是直接通过私有作用域设置静态私有变量,也可以用其他设计模式来限定变量作用域。因为数组对象的迭代方法也是一种遍历,所以也可以借助用来实现求和。一、利用数组对象的各迭代方法:1.array.every()查询是否有所有项都匹配的方法:1(function(){…

    2022年9月28日
    3

发表回复

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

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