vue页面缓存问题_vue项目自动打开浏览器设置

vue页面缓存问题_vue项目自动打开浏览器设置目录1.什么是浏览器缓存2.浏览器缓存类型:3.浏览器缓存的优势与劣势:4.浏览器缓存机制5.如何清除浏览器缓存在代码更新发布后,都会要求运营人员在访问网址时清除下本地缓存,防止万一掉坑那问题就来了:每次清缓存很麻烦,怎样就不需要他们每次去手动清缓存呢?1.什么是浏览器缓存浏览器缓存(BrowserCaching)是为了节约网络的资源加速浏览,浏览器在用户磁盘上对最近请求过的文档进行存储,当访问者再次请求这个页面时,浏览器就可以从本地磁盘显示文档,这样就可以加速页

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

目录

1.什么是浏览器缓存

2.浏览器缓存类型

3.浏览器缓存的优势与劣势

4. 浏览器缓存机制

5.如何清除浏览器缓存


在代码更新发布后,都会要求运营人员在访问网址时清除下本地缓存,防止万一掉坑

那问题就来了:每次清缓存很麻烦,怎样就不需要他们每次去手动清缓存呢?这就涉及到了浏览器缓存的问题

1.什么是浏览器缓存

浏览器缓存(Browser Caching)是为了节约网络的资源加速浏览,浏览器在用户磁盘上对最近请求过的文档进行存储,当访问者再次请求这个页面时,浏览器就可以从本地磁盘显示文档,这样就可以加速页面的阅览

2.浏览器缓存类型

  • 缓存协商:Last-modified ,Etag
  • 彻底缓存(强制缓存):cache-control,Expires

3.浏览器缓存的优势与劣势

优势:

  • 节约网络资源,提高网络效率
  • 降低服务器压力,减少服务器负担

缺点:

  • 缓存没有清理机制
  • 占用硬盘空间
  • 页面缓存,导致页面样式、图片或脚本等未能及时更新展示

4. 浏览器缓存机制

查阅这里:https://www.cnblogs.com/vajoy/p/5341664.html

还有这里:https://blog.csdn.net/u014590757/article/details/80140654

还有这里:https://www.jianshu.com/p/1a1536ab01f1

还有:https://www.cnblogs.com/kevingrace/p/10459429.html

5.如何清除浏览器缓存

  • 修改根目录index.htm 让所有的css/js资源重新加载
    // index.html 
    <head> 
        <meta http-equiv="pragram" content="no-cache"> 
        <meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate">
    </head>
  • 配置 nginx 不缓存 html

    vue默认配置,打包后css和js的名字后面都加了哈希值,不会有缓存问题。但是index.html在服务器端可能是有缓存的,需要在服务器配置不让缓存index.html 

    server {
        listen 80;
        server_name yourdomain.com;
        location / {
            try_files $uri $uri/ /index.html;
            root /yourdir/;
            index index.html index.htm;
    
            if ($request_filename ~* .*\.(?:htm|html)$)
            {
                add_header Cache-Control "no-cache, no-store";  //对html文件设置永远不缓存
            }      
          }
    }
    

    no-cache:数据内容不能被缓存, 每次请求都重新访问服务器, 若有max-age, 则缓存期间不访问服务器

        no-store:不仅不能缓存, 连暂存也不可以(即: 临时文件夹中不能暂存该资源)

  • 打包的文件路径添加时间戳 

使用vue脚手架搭建的项目,打开vue.config.js

//vue.config.js
const version = new Date().getTime();
module.exports = {
    css: {
	    
	    // 是否使用css分离插件 ExtractTextPlugin
	    extract: {
	      // 修改打包后css文件名   // css打包文件,添加时间戳
	      filename: `css/[name].${version}.css`,   
	      chunkFilename: `css/[name].${version}.css`
	    }
	 },

    configureWebpack: {
        output: { // 输出重构  打包编译后的 文件名称  【模块名称.版本号.时间戳】
            filename: `[name].${process.env.VUE_APP_Version}.${Timestamp}.js`,
            chunkFilename: `[name].${process.env.VUE_APP_Version}.${Timestamp}.js`
        }
    }
}

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/180006.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 报表数据填报中的合法性校验

    报表数据填报中的合法性校验

  • ubuntu降低内核版本后无网络_Ubuntu换内核为旧版

    ubuntu降低内核版本后无网络_Ubuntu换内核为旧版1、最近原来写的测试代码在Ubuntu18可以内核版本,在新的安装的Ubuntu20上无法运行,各种操作后想排除下是否是因为内核版本过高的原因,因此用到降低ubuntu内核版本的操作:原ubuntu18内核版本Ubuntu20内核版本2、首先通过apt-cachesearchlinux|grep5.4.0-80查看目前的版本3、然后输入下面命令进行安装:sudoapt-getinstalllinux-headers-5.4.0-80-generi…

  • go分析和kegg分析_GO和KEGG富集分析(Metascape数据库)「建议收藏」

    介绍生物信息学研究中,获取基因列表的GO和KEGG富集分析的需求非常常见。目前有许多生物信息学手段或者数据库可以实现基因富集分析,例如DAVID,但它们有些是收费的,有些不易于使用且很少维护。例如DAVID曾经有六年的时间(2010-2016)没有维护数据库,最近的更新也已经两年半了。而Metascape每月更新其相关的40多个数据库,以确保提供最准确的结果。因此Metascape数据库可以作为富…

  • phpstorm 2021 3月份 激活码破解方法

    phpstorm 2021 3月份 激活码破解方法,https://javaforall.cn/100143.html。详细ieda激活码不妨到全栈程序员必看教程网一起来了解一下吧!

  • Linux 常用的zip压缩和解压命令详解

    Linux 常用的zip压缩和解压命令详解前言  嗨,大家好,又与大家见面了,感谢大家在2021年的陪伴,让我们在2022年继续一路前行。相信很多小伙伴在使用Linux系统中经常对文件进行或者文件夹进行操作,不像在Windows中可以使用可视化的工具对文件和文件夹进行压缩和解压操作,那么本次与大家一起学习Linux下zip和unzip的压缩和解压命令,并熟悉常用的参数介绍。常用命令  相信很多对于有一定Linux基础的小伙伴,常用的压缩有:zip、unzip、tar、gzip、bzip2等常用的命令,下面开始zip和unzip使用方法和参数详

  • java random函数用法_JAVA的Random类的用法详解[通俗易懂]

    java random函数用法_JAVA的Random类的用法详解[通俗易懂]Random类主要用来生成随机数,本文详解介绍了Random类的用法,希望能帮到大家。Random类(java.util)Random类中实现的随机算法是伪随机,也就是有规则的随机。在进行随机时,随机算法的起源数字称为种子数(seed),在种子数的基础上进行一定的变换,从而产生需要的随机数字。相同种子数的Random对象,相同次数生成的随机数字是完全相同的。也就是说,两个种子数相同的Random…

发表回复

您的电子邮箱地址不会被公开。

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