码迷,mamicode.com
首页 > Web开发 > 详细

web前端对文件的引用规则

时间:2018-11-11 19:11:15      阅读:232      评论:0      收藏:0      [点我收藏+]

标签:模式   web   tor   style   styles   web前端   打包   his   ofo   

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

使用相对路径引入规则:

  1. html或者js引入图片,按照html的目录来算
  2. css引入图片,按照css的目录来计算。

那什么是html目录:

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


<link rel="stylesheet" href="css/aa.css">

那么,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://segmentfault.com/a/1190000016942706

web前端对文件的引用规则

标签:模式   web   tor   style   styles   web前端   打包   his   ofo   

原文地址:https://www.cnblogs.com/lalalagq/p/9942924.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!