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前端對文件的引用規則