web前端对文件的引用规则

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模式)单页应用。

相关推荐