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年8月1日
  • c中构造函数的作用_python中构造方法的作用

    c中构造函数的作用_python中构造方法的作用C#中构造函数的作用共同点:都是实例化对象,初始化数据的默认构造是说所有的类都从祖先object那继承了空参的构造方法,你不写与写空参构造都存在,而有参数的构造一般是自己写的,写就有不写就没有,它的作用和空参的一样,只是它里面可以有参数,给你个例子来说明吧有一个类Monitor它有属性Stringheight;StringwidthpublicMonitor(){}publ

    2022年9月7日
  • pycharm如何打开py文件_怎么用terminal打开文件

    pycharm如何打开py文件_怎么用terminal打开文件Pycharm的下方工具栏中有两个窗口:PythonConsole和Terminal(如下图)其中,PythonConsole叫做Python控制台,即Python交互模式;Terminal叫做终端,即命令行模式。Python交互模式主要有两种:CPython用>>>作为提示符,而IPython用In[序号]:作为提示符。Python交互式模式可以直接输入代码,然后执行,并立刻得到结果,因此Python交互模式主要是为了调试Python代码用的。命..

    2022年8月26日
  • 广东电信 DNS 设置更改

    广东电信 DNS 设置更改因为未知原因(真的不知中国电信为何如此,有空打10000问问),原先广东电信用户可以使用的DNS服务器,如202.96.128.68202.96.128.110,不能使用了。因此,如果你的ADSL是使用路由方式共享上网的,并且手动设置了DNS服务器地址为以上ip,将会出现上不了网的情况。这就需要把DNS服务器地址更…

    2022年7月11日
  • 创建线程:pthread_create

    创建线程:pthread_create

    2022年3月2日
  • GlassFish 总结

    GlassFish 总结##Glassfish简介Glassfish是一款Web应用服务器,和Tomcat一样,也是一款优秀的Servlet容器。##domin概念1、domain是Glassfish中,拥有独立端口的

    2022年7月2日

发表回复

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

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