當前位置:首頁 » 網頁前端 » 前端相對路徑
擴展閱讀
webinf下怎麼引入js 2023-08-31 21:54:13
堡壘機怎麼打開web 2023-08-31 21:54:11

前端相對路徑

發布時間: 2023-08-07 00:07:02

A. 網站的URL路徑如何設置

想要知道網站的URL路徑如何設置,就必須要了解URL路徑分類有哪些?網站技術人員一般會通過調用圖片、CSS以及JS代碼來對網站進行設計。而這種調用模式一般分為兩種,一種是相對路徑,另一種是絕對路徑。用專業的話來說就是相對URL和絕對URL。

1、相對路徑

我們都知道打開正確的網址才能獲得想要的網站。同樣,網站里的圖片、樣式以及特效也是正確的路徑才能獲取到。在新手學習前端代碼的時候,往往會因為調用錯誤而導致圖片不能顯示、樣式顯示錯誤、特效無法顯示等問題。而這個配拆攜時候我們就要學會怎麼設置路徑了,路徑對了,圖片、樣式、特效就能正常顯示了。

優點:相對路徑的優點就是容易移動,可以通御輪過整個文件夾進行移動進行移動,測試本地網站也會更加方便。

缺點:相對路徑的缺點就是如果代碼不夠嚴謹,當移動文件夾之後,部分頁面可能會出現錯亂現象,而且如果使用相對路徑後,很容易被整站抄襲。

2、絕對路徑

相對路徑是相對某個文件夾下的單獨調用,而絕對路徑是指固定的某個文件夾下的調用。絕對路徑調用起來與相對路徑相比更加單一,也更加穩定,如果不單獨修改這一路經下的資料,是絕對無法更改和使用該路徑下的內容。

絕對路徑使用的地方較少,沒有特殊需求的情況下是不會使用的。培伏但是這種絕對路徑通常會出現在抄襲網站中,有些抄襲網站的人為了省事,所以會直接使用對方的網址。

優點:絕對路徑的優點是,如果有人抄襲你的網站內容,裡面的鏈接還會指向你的網站。有些抄襲者比較懶,根本不會修改裡面的內容。其實也不局限於被抄襲,如果有人將你的網頁保存到本地計算機中,裡面的鏈接、圖片、CSS以及JS仍然會連接到你的網站上。當網頁內容被修改的時候,因為使用的是絕對路徑,所以依然會指向正確路徑。

缺點:絕對路徑的缺點是在本地測試的時候,如果使用某一個地址的話,後期網站正式上線修改起來會非常麻煩的。

所以說想要知道網站的URL路徑如何設置,就要詳細了解URL的一些常識,這樣才能對網站有所幫助。

B. qiankun 微前端應用實踐與部署(四)

一般情況下,我們對應用進行配置打包,要對圖片字體等資源進行下面配置,使得資源路徑正常載入。但是,在微前端模式下,子應用打包部署後,往往會出現子應用 css 文件裡面引入資源路徑載入失敗的問題,下面就讓我們來探究一下。

👉 獨立應用下的 url-loader 配置:

因為 url-loader 的 options 項的屬性 publicPath 屬性默認是 '' ,表示相對路徑,即打包出來的資源引用 url 都會加上相對路徑尋找 static 靜態資源入口,比如:

所有應用編譯打包部署後,當主應用載入子應用,子應用載入自身的 css 文件樣式時,由於 其對應的 css 文件裡面的圖片 url 引用是相對路徑,會出現子應用的資源相對路徑拼接主應用 domain 的情況,即子應用的 ../../static/img/bg_header.790a94f4.png 會在主應用的 domain 下進行資源的尋找,導致載入失敗 404 的情況。

如果項目有用到第三方庫,比如 element-ui ,那麼就更有必要進行處理了。因為 element-ui 的字體圖標是在 css 裡面引入的,還有相關背景圖片的引入也是在 css 里,所以需要配置 webpack 的 url-loader ,生產模式情況下直接指定資源前綴,使之成為絕對路徑。

這樣配置後,打包出來的 css 樣式文件會變成:

資源是絕對路徑,就不會出現上面子應用資源載入失敗的情況。

但是,這種前端配置文件寫死路徑的做法靈活性並不好,比如不能做到編譯一次,任意部署,因為路徑寫死,所以如果需要部署到其他伺服器的話,就需要重新編譯了。

接下來,講的是實現靈活部署的方案。

我們在只編譯打包一次前端應用的前提下,為了實現靈活部署,需要藉助 nginx 來實現。

下面以 vue-cli 3 的配置為例,與 vue-cli 2 只是寫法上的區別,其他都一樣。

假設主應用部署地址是 192.168.2.192 ,子應用的部署地址是 192.168.2.192:7102 。

打包編譯部署後,子應用的 css 文件裡面的圖片資源引用 url 如下:

主應用載入子應用的時候,子應用的資源拼接主應用 domian 後,子應用的 css 文件裡面的圖片資源載入路徑 url 就會變成:

此時的關鍵就是要訪問到子應用的資源,而不是去主應用資源目錄去找。

所以我們採用 nginx 路徑代理轉發埠的方案,當應用訪問 192.168.2.192/live 這個路徑時,經過 nginx 進行路徑代理轉發配置,轉發到子應用埠。

配置 nginx 代理規則:

此時真正訪問的資源路徑(子應用資源路徑)是:

👋 至此,通過修改配置 url-loader 的 publicPath 以及配置 nginx 的路徑代理轉發,就可以實現編譯打包一次,到處部署的目的。

C. 求大神前端名詞解釋:URL、路徑、地址、域名,最好能舉例說明

這幾個詞除了url和域名指代非常明確,其他都是翻譯的所以有時會有混用的情況——比如A書里說的地址,有可能就是B書里說的url或者路徑,但是一般來說解釋如下:
url是資源地址——格式如下:
協議://用戶名:密碼@子域名.域名.頂級域名:埠號/目錄/文件名.文件後綴?參數=值#標志
比如:
http://www..com/
file:///C:/Users/computer/Desktop/abcd.pdf
http://192.168.0.1:8080/abcd/a.php?file=abcd
路徑一般指文件路徑,分為相對路徑和絕對路徑:
相對路徑:../images/a.jpg
絕對路徑:C:\
地址一般說的是ip地址:
192.168.0.1
域名說的是由綁定了ip地址,由DNS解析的別名,通俗的說就是我們訪問網站的根網址比如:
www..com
這就是一個域名

D. web前端開發基礎如何鏈接兩個html文檔

如果使用絕對路徑,那就在什麼文件夾裡面都沒有問題了
如你要求在F盤:<a href="f:\###.htm>鏈接文字</a>
但此鏈接只能在你的計算機上面使用,如果要傳送到伺服器端,那就必須使用相對路徑
就是說鏈接的文件相對於你現在所使用文件所在的位置,如果在同一文件夾,直接鏈接那個文件的名字
<a href="###.htm>鏈接文字</a>
在子目錄admin下面,注意相對路徑是使用的左斜杠
<a href="admin/###.htm>鏈接文字</a>
在此目錄的上一級目錄使用
<a href="../###.htm>鏈接文字</a>