web前端对文件的引用规则

2024-10-01 08:27:05

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

使用相对路径引入规则：

html或者js引入图片，按照html的目录来算
css引入图片，按照css的目录来计算。

那什么是html目录：

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



&lt;link rel="stylesheet" href="css/aa.css"&gt;

那么，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

最新文章

热门文章