首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

为什么要将版本号添加到CSS文件路径?

将版本号添加到CSS文件路径是为了解决浏览器缓存问题。当一个网页被访问时,浏览器会将其所需的所有资源(如CSS、JavaScript和图片文件)缓存在本地。这样,当用户再次访问该页面时,浏览器可以直接从本地缓存中加载这些资源,而无需再次从服务器下载,从而提高页面加载速度。

然而,当开发人员更新了CSS文件后,浏览器可能会使用旧的缓存版本,导致更新的样式无法在用户的浏览器中生效。为了解决这个问题,开发人员可以将版本号添加到CSS文件的路径中。这样,当CSS文件更新时,浏览器会认为这是一个新的文件,而不是使用缓存中的旧版本。这可以确保用户浏览器中始终加载最新的CSS样式。

例如,原来的CSS文件路径是:

代码语言:txt
复制
<link rel="stylesheet" href="style.css">

开发人员可以将版本号添加到文件路径中,如下所示:

代码语言:txt
复制
<link rel="stylesheet" href="style-v1.0.0.css">

这样,当CSS文件更新时,开发人员只需要更改版本号即可,例如将其更改为style-v1.0.1.css。这将确保用户浏览器加载最新的CSS样式。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

html(css、js、html、web)文件引用路径写法【flask】

-后端又如何回复请求(如:回复路由,往往回复一个json对象) - … 1、引入本地静态css,js文件: 比如文件路径:static/css/pintuer.css路径如下: 2、引用网上css、js文件 如cdn加速资源 常规路径..."> 3、templates模板互相跳转 3.1路由在app中 模板中只认可静态文件路径,还有路由,下面将通过路由的方法指向另一个模板 #H5 A.html下: <a href="{{url_for('...参照4 6、js<em>文件</em>中对其他内嵌js<em>文件</em>的引用 以layui内置为例,在index.js 引入 bodyTab.js bodyTab.js 项目<em>路径</em>:/static/js/bodyTab.js //...如果数据库涉及<em>文件</em>存放<em>路径</em>,更换电脑后原本正常的项目显示static<em>文件</em><em>路径</em>构建失败的情况,记得先检查下数据库存储的<em>路径</em>是否有问题。

3.9K30

js、css外部文件的相对路径问题

如果js、css外部文件有使用到相对路径时,需要注意其相对路径的基准是不一样的。...比如说,在index.html中引用到了外部的js和css文件,这两个文件都通过相对路径引用了某一张图片;这些文件所在的目录如下: 1 2 3 4 5 6 7 8 9 . ├── js | └──...index.js ├── css | └── index.css ├── images | └── bg.jpg └── index.html js文件的相对路径是以引用该js文件的页面为基准...)"; } css文件的相对路径是以自身的位置为基准,所以在css文件中的相对路径是: 1 2 3 .index_bg { background-image: url(.....js文件的页面为基准 css文件的相对路径是以自身的位置为基准 警告 本文最后更新于 May 2, 2018,文中内容可能已过时,请谨慎使用。

3.7K40
  • 文件修改时间戳做 CSS、JS 等文件版本号,减少主动清理更新缓存的次数

    每次修改 WordPress 的 css 和 js 文件,都要主动清理文件的缓存才能生效,尤其是采用了 oss 和 cdn 回源。...使用函数 filemtime() 获取文件修改时间戳,并以此做版本号,比如 my.js?ver=1639757946141 就不用再去手动刷新缓存了。 注意文件必须是 相对路径,使用绝对路径会报错。...<link rel="stylesheet" href="wp-content/themes/wp/static/<em>css</em>/libs.<em>css</em>?ver=<?...php echo filemtime(wp-content/themes/wp/static/<em>css</em>/libs.<em>css</em>); ?...<em>css</em>//wp_enqueue_script() 安全引入 js//代码中的 <em>css</em> 和 js <em>路径</em>,请根据主题的实际<em>路径</em>修改 function theme_scripts() { wp_enqueue_style

    88220

    在 ASP.NET Core 项目中使用 npm 管理你的前端组件包

    在 install 命令中我们添加了 --save 修饰,表示需要将 bootstrap 添加到 dependencies 节点下面。...而 “{contentroot}/wwwroot” 这个目录是对外发布项目中的静态文件默认使用的根目录,也就是说,我们需要将使用到的 npm 包移动到 wwwroot 文件下。   手动复制?.../wwwroot/lib/' }; //css paths.cssDist = paths.css + "**/*.css";//匹配所有 css文件所在路径 paths.minCssDist =...paths.css + "**/*.min.css";//匹配所有 css 对应压缩后的文件所在路径 paths.concatCssDist = paths.css + "app.min.css";/.../将所有的 css 压缩到一个 css 文件后的路径 //js paths.jsDist = paths.js + "**/*.js";//匹配所有 js 的文件所在路径 paths.minJsDist

    2K30

    从零开始学 Web 之 移动Web(八)Less

    命令行输入:lessc -v 出现 less 版本号,即表示安装成功。 ? 三、编译 浏览器只能识别 CSS,Less 只是用来提升CSS可维护性的一个工具,所最终需要将LESS编译成CSS。...但是这两种注释有区别:这两种样式在 less 中都是注释,但是 // 注释不会进行编译,也就是不会在生成的 css 文件中显示,而 /**/ 注释则会在 css 文件中对应显示。...我们之前编写好 less 文件之后,都是自动解析成 css 然后添加到 html 文件中。.../js/less.js"> 看起来好麻烦哦,为什么要引入 less 文件,它有什么好处吗?...语法: @import "other1.less"; // other.less 为其他 less 文件路径名称 @import "other2.less"; @import "other3.less

    1K30

    WordPress 开发之让浏览器自动加载最新的CSS、JS文件(免刷新缓存)

    在开发WordPress 主题的时候,如果频繁更新主题的CSS、JS文件但主题已经上线,如何让访客的浏览器获取最新的CSS、JS文件而非等到浏览器删除缓存后?下面就介绍一个简单的方法。...即原来比如说css 文件路径代码是如下面的: http://devework.com/wp-content/themes/Devework/style.css 那么如果更新了css 文件,可以为此添加版本号...有过WordPress 主题开发经验的都知道,WordPress 中引用主题的styl.css 文件路径是直接使用函数<?php bloginfo('stylesheet_url'); ?...将下面的代码添加到主题的functions.php 文件下即可为styl.css 文件添加时间戳版本号: add_action( 'wp_enqueue_scripts', 'add_styles' ).../css/style.css', NULL, filemtime($css_file) ); } js文件的话依照上面的照搬即可实现。

    5K100

    WordPress 开发之让浏览器自动加载最新的CSS、JS文件(免刷新缓存)

    在开发WordPress 主题的时候,如果频繁更新主题的CSS、JS文件但主题已经上线,如何让访客的浏览器获取最新的CSS、JS文件而非等到浏览器删除缓存后?下面就介绍一个简单的方法。...即原来比如说css 文件路径代码是如下面的: http://devework.com/wp-content/themes/Devework/style.css 那么如果更新了css 文件,可以为此添加版本号...image.png 有过WordPress 主题开发经验的都知道,WordPress 中引用主题的styl.css 文件路径是直接使用函数<?...将下面的代码添加到主题的functions.php 文件下即可为styl.css 文件添加时间戳版本号: add_action( 'wp_enqueue_scripts', 'add_styles' ).../css/style.css', NULL, filemtime($css_file) ); } js文件的话依照上面的照搬即可实现。

    4.7K80

    git操作这一篇就够用了

    初始化仓库, 在当前目录下生成一个隐藏文件夹.git git init git add 作用:将文件由 工作区 添加到 暂存区,在git中,文件无法直接从工作区直接添加到仓库区,必须先从工作区添加到暂存区...命令:git add 文件名/目录名 将index.html添加到暂存区 git add index.html 将css目录下所有的文件添加到暂存区 git add css 将当前目录下所有的js文件添加到暂存区...git add *.js 添加当前目录下所有的文件 git add . git add -A git add --all git commit 作用:将文件由 暂存区 添加到 仓库区,生成版本号文件从暂存区提交到仓库...将不需要被git管理的文件路径添加到.gitignore中 忽视idea.txt文件 idea.txt 忽视.gitignore文件 .gitignore 忽视css下的index.js文件 css/index.js...忽视css下的所有的js文件 css/*.js 忽视css下的所有文件 css/.

    61450

    Vue笔记(7) 很长

    src有js文件夹,image文件夹,css文件夹,里面是源js,源css和源图片等 main.js是入口文件,在入口文件中引入要用的css文件,js,图片等,打包好以后的文件(bundle.js...中的模块操作,向外暴露了一个配置对象 在配置文件中需要手动指定入口和出口,在任何模块文件内部,可以使用__dirname变量获取当前模块文件所在目录的完整绝对路径 entry入口,表示,要使用...--save-dev css-loader@0.28.11 在src下面创建一个CSS文件 给背景一个颜色 normal.css 然后将这个CSS文件在main.js入口文件中引入一下...然后进入webpack.config.js进行配置 也许会有个疑问,为什么是先写添加的,再写加载的呢?...:因为这个图片不在这个文件夹的路径下 所以我们要想办法让他的路径变成这样的,图片就能显示出来了 webpack.config.js 再次run一下 这次就成功啦 看弹幕说为什么不把

    64320

    iOS开发 -- 组件化 之 Cocoapods私有库详解

    组件化 为什么我们需要组件化 项目模块间的解耦、模块实现可重用、提升团队成员之间团队之间的协作开发效率、更方便单元测试。...远程索引库 概念:每创建一个组件都会带一个 xxx.podspec 的索引文件。专门用来存放这些索引文件的库就叫做索引库。我们需要将这些索引文件上传到远程索引库才能保证其他的同事能够拿来用。...添加组件化代码到 Classes 文件夹 Classes 中的文件修改后,我们cd到Example下进行 pod install (刚才添加到 Classes 中的文件夹 pod 进来) 修改 podspec...文件 编译组件不报错的话,开始修改 podspec 文件: 一般修改一下几个内容: 修改版本号 修改项目的简单概述和详细概述 修改 homepage 和 source 地址 添加依赖库 编译通过之后...podspec 里写的版本号一致) git push --tags 验证podspec索引文件 通过 pod spec lint --verbose --allow-warnings --use-libraries

    1.6K41

    使用JsdelivrCDN加速博客访问速度

    首先新建GitHub仓库 [20191221175839.png] 本地新建一个文件夹,文件夹名称自定义,然后进入文件夹,在文件夹内依次执行下面的命令 [20191221180643.png] git...[20191221183016.png] 自定义发布版本号,添加标题和描述等 [20191221183244.png] 通过jsdelivr引用资源 使用方法:https://cdn.jsdelivr.net.../gh/你的用户名/你的仓库名@发布的版本号/文件路径 例如:https://cdn.jsdelivr.net/gh/Yafine/cdn@3.1.1/source/medias/avatar.jpg...https://cdn.jsdelivr.net/gh/Yafine/cdn@3.1.1/source/css/gallery.css https://cdn.jsdelivr.net/gh/Yafine.../cdn@3.1.1/source/loading4.gif 注意:版本号不是必需的,是为了区分新旧资源,如果不使用版本号,将会直接引用最新资源 如果以后在向cdn库里添加或者修改文件,首先把文件添加到本地仓库

    1.2K30

    从 0 到 1 的项目管理系统:脚手架篇 - H5 基础脚手架

    看过之前博客的同学,应该知道在创建版本的时候引入了版本号的概念,在创建分支版本的时候,带上版本号,创建的分支名为 feat/0.0.01,而我们发布的静态资源也是带了版本 ?...之前有让同学关注过 url 上面的版本号哈 改造 Webpack 路径 const branch = childProcess.execSync('git rev-parse --abbrev-ref.../${version}`, } 如上,我们先将分支版本号获取,再修改资源引用路径,即可完成资源版本的处理,如下图所示,h5 链接被修改成常规 url,引用资源带上了版本号 ?...} } window.hotLoad = hotLoad 上述代码是将第三方资源,通过 xhr 获取之后,使用 Blob + URL.createObjectURL 制造本地链接,使用 js 动态添加到页面中去...为什么是开放部分源码,因为有些业务是需要贴合实际项目针对性开发的,开放出去的公共模块我写的认真点 为了写个系列博客,居然真撸完整个系统(不是一般的累),觉得不错的同学麻烦顺手三连(点赞,关注,转发)。

    71620

    Go:如何使用书中示例 sim.go v2新版本及如何理解、使用 Go 语言的 mod 机制【视频】

    ://golang.org/dl/,国内可以从https://studygolang.com/dl下载)下载了Go语言安装包,并安装以后,此时在终端里执行指令: go version 一般都可以显示版本号了...一般我们在环境变量中,还需要设置一个名称为GOPATH的用户变量或系统变量,同时还需要将GOPATH/bin添加到变量PATH的路径中。...$PATH路径的设置与之同理。 为什么要设置环境变量? GOPATH变量不设置,不影响运行,它在Go语言安装包默认安装后有一个~/go的默认地址,但GOPATH/bin必须添加到PATH的路径中。...go get可以帮助我们自动拉取类库源码,及目标类库所依赖的类库源码(放在了GOPATH/src路径下),并在本地自动编译,并将编译生成的本地二进制可执行文件拷贝到GOPATH/bin路径下。...首先我们创建一个文件

    1.3K20

    Go语言:1分钟写下第一个Go程序,并在终端里以指令方式运行

    ://golang.org/dl/,国内可以从https://studygolang.com/dl下载)下载了Go语言安装包,并安装以后,此时在终端里执行指令: go version 一般都可以显示版本号了...一般我们在环境变量中,还需要设置一个名称为GOPATH的用户变量或系统变量,同时还需要将GOPATH/bin添加到变量PATH的路径中。...$PATH路径的设置与之同理。 为什么要设置环境变量? GOPATH变量不设置,不影响运行,它在Go语言安装包默认安装后有一个~/go的默认地址,但GOPATH/bin必须添加到PATH的路径中。...go get可以帮助我们自动拉取类库源码,及目标类库所依赖的类库源码(放在了GOPATH/src路径下),并在本地自动编译,并将编译生成的本地二进制可执行文件拷贝到GOPATH/bin路径下。...在终端里可以执行它了: first // output: hi,ly 在上面我们编译源码之前,为什么要先设置Go环境变量GO111MODULE等于off呢?可以把它设置为on,再试一下。

    1.6K10
    领券