资讯专栏INFORMATION COLUMN

web前端对文件的引用规则

张春雷 / 1695人阅读

摘要:前端一般常用文件。使用相对路径引入规则或者引入图片,按照的目录来算引入图片,按照的目录来计算。这儿是接上面的地址,文件被引用后,它有一段代码那么的实际引用地址为。存在的问题如果使用前端路由并采用模式,引入采用相对路径,则可能出现问题。

web前端一般常用文件 .html .css .js。但是当用css文件和html引入资源(比如图片)时,路径可能不相同。下面总结了几条。

使用相对路径引入规则:

html或者js引入图片,按照html的目录来算

css引入图片,按照css的目录来计算。


那什么是html目录:

例如:http://ip/a/b 请求回来的是html文件,那么html文件的目录就是/a/ 文件夹,如果此html有一段代码:

那么,css文件的实际引用的路径为 /a/css/aa.css

什么是css目录

简单说就是css文件的存放地址。这儿是/a/css
接上面的地址,css文件(/a/css/aa.css)被引用后,它有一段代码background:url("img/cc.png").
那么 cc.png的实际引用地址为/a/css/img/cc.png

存在的问题:

如果使用前端路由并采用history模式,引入采用相对路径,则可能出现问题。当路由到达2级目录地址时比如: http://ip/1/2 ,此页面如果采用有相对路径的引用,就会失败。所有相对引用地址前都会被加上 /1/ 这个目录地址。当你在此页面刷新时,bug就出来了。


ps: 这儿所说的地址不是打包前的地址,是打包后真实的地址。往后一篇会根据此笔记要点,使用nginx + 一个端口,部署多个采用前端路由(history模式)单页应用。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/58586.html

相关文章

  • web前端文件引用规则

    摘要:前端一般常用文件。使用相对路径引入规则或者引入图片,按照的目录来算引入图片,按照的目录来计算。这儿是接上面的地址,文件被引用后,它有一段代码那么的实际引用地址为。存在的问题如果使用前端路由并采用模式,引入采用相对路径,则可能出现问题。 web前端一般常用文件 .html .css .js。但是当用css文件和html引入资源(比如图片)时,路径可能不相同。下面总结了几条。 使用相对路径...

    yearsj 评论0 收藏0
  • web前端文件引用规则

    摘要:前端一般常用文件。使用相对路径引入规则或者引入图片,按照的目录来算引入图片,按照的目录来计算。这儿是接上面的地址,文件被引用后,它有一段代码那么的实际引用地址为。存在的问题如果使用前端路由并采用模式,引入采用相对路径,则可能出现问题。 web前端一般常用文件 .html .css .js。但是当用css文件和html引入资源(比如图片)时,路径可能不相同。下面总结了几条。 使用相对路径...

    jk_v1 评论0 收藏0
  • web前端文件引用规则

    摘要:前端一般常用文件。使用相对路径引入规则或者引入图片,按照的目录来算引入图片,按照的目录来计算。这儿是接上面的地址,文件被引用后,它有一段代码那么的实际引用地址为。存在的问题如果使用前端路由并采用模式,引入采用相对路径,则可能出现问题。 web前端一般常用文件 .html .css .js。但是当用css文件和html引入资源(比如图片)时,路径可能不相同。下面总结了几条。 使用相对路径...

    xiao7cn 评论0 收藏0
  • web前端编码规范整合

    摘要:杂项用代替里一定要有的判断不要在内置对象的原型上添加方法,如不要在内层作用域的代码里声明了变量,之后却访问到了外层作用域的同名变量变量不要先使用后声明不要在一句代码中单单使用构造函数,记得将其赋值给某个变量不要在同个 决定综合网上的规范整出一套自己的开发规范出来,以后代码的风格均按照要求来编排,方便管理维护 一、 命名规范 项目命名:全部采用小写方式, 以下划线分隔,例:my_pro...

    孙淑建 评论0 收藏0
  • web前端编码规范整合

    摘要:杂项用代替里一定要有的判断不要在内置对象的原型上添加方法,如不要在内层作用域的代码里声明了变量,之后却访问到了外层作用域的同名变量变量不要先使用后声明不要在一句代码中单单使用构造函数,记得将其赋值给某个变量不要在同个 决定综合网上的规范整出一套自己的开发规范出来,以后代码的风格均按照要求来编排,方便管理维护 一、 命名规范 项目命名:全部采用小写方式, 以下划线分隔,例:my_pro...

    liaoyg8023 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<