html, js,css应用文件路径规则
web前端一般常用文件 .html .css .js。但是当用css文件和html引入资源(比如图片)时,路径可能不相同。下面总结了几条。
使用相对路径引入规则:
- html或者js引入图片,按照html的目录来算
- 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模式)单页应用。