理解 JavaScript 中的“ / ”：路徑、資源與目錄、nginx配置、請(qǐng)求、轉(zhuǎn)義的那些事

        Web 開(kāi)發(fā)中你一定見(jiàn)過(guò) / —— 但它的用法可不僅僅是「斜杠」。這篇文章將全面梳理 / 在 JavaScript 和前端開(kāi)發(fā)中的多種應(yīng)用和語(yǔ)義，從文件路徑到 API 請(qǐng)求，從瀏覽器資源引用到服務(wù)器配置，甚至涉及到轉(zhuǎn)義、nginx配置和正則表達(dá)式。

一、路徑中 / 的含義

1、 / 所扮演的角色

        在瀏覽器、Node、Vue CLI 中，/ 都表示一種層級(jí)關(guān)系，常用來(lái)分隔目錄結(jié)構(gòu)或路由片段：

• /src/components/Button.vue → 組件文件路徑
• /api/user/info → RESTful API 路徑
• /about → 前端路由路徑

2、根據(jù) URL 中的 / 判斷是目錄還是資源

        瀏覽器會(huì)自動(dòng)根據(jù) URL 最后是否包含 / 來(lái)區(qū)分目錄或文件資源，關(guān)鍵就在于是不是以 / 結(jié)尾，如果是，就代表最后一個(gè)路徑名是目錄名（文件夾名稱(chēng)），如果不是以 / 結(jié)尾，就是文件資源。

        /about/ → 被認(rèn)為是目錄，會(huì)嘗試尋找 /about/index.html（vue中是尋找 /about/index.vue）

3、相對(duì)路徑 vs 絕對(duì)路徑

        一個(gè)表格講清楚：

        vue 項(xiàng)目使用絕對(duì)路徑的時(shí)候，/ 一般是從 public 文件夾開(kāi)始往下，無(wú)法通過(guò)絕對(duì)路徑訪問(wèn)src文件夾中的資源（一般用@，但是要配置），因?yàn)閟rc下的資源在打包后會(huì)重新分配結(jié)構(gòu)，使用絕對(duì)路徑在生產(chǎn)環(huán)境就會(huì)失效，所以毫無(wú)意義。

4、相對(duì)路徑中的 . 與 ..

• .：當(dāng)前路徑（Current Directory）
• ..：上一級(jí)目錄（Parent Directory）

<!-- 當(dāng)前文件在 /pages/about/index.html -->
<img src="../../images/banner.jpg"> 
<!-- 實(shí)際路徑為 /images/banner.jpg -->
<!-- pages與iamges在同一目錄下 -->

二、Vue中 / 的特殊作用

1、Vue Router 中的 /

        在Vue Router中，/ 代表根路由，也就是說(shuō)實(shí)際路徑為：協(xié)議+域名（ip+端口）+ baseUrl + 路由。最后的路由部分就是Vue Router配置的內(nèi)容，根路由就是路由為 / 。

        此外/about/ 與 /about 默認(rèn)被視為等價(jià)（除非手動(dòng)設(shè)置）

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
]

2、Vue 項(xiàng)目構(gòu)建時(shí)的 base 配置

        這個(gè)其實(shí)是要根據(jù)生產(chǎn)環(huán)境下的路由決定的，生產(chǎn)環(huán)境下的路由是什么，這里base就設(shè)置什么，以此來(lái)保證打包部署后的資源能被正確訪問(wèn)。

// vite.config.js
export default defineConfig({
  base: '/my-app/', // 所有資源前綴會(huì)帶上這個(gè)路徑
})

三、SEO 對(duì) / 的敏感性

        搜索引擎（如 Google、Baidu）會(huì)把下面兩個(gè)路徑視為兩個(gè)不同的頁(yè)面：

• /blog
• /blog/

        所以需要路由統(tǒng)一末尾加 /，或者通過(guò) Nginx 重定向處理一致性，避免 /about 和 /about.html 指向同一頁(yè)面而無(wú)重定向，容易造成 SEO 評(píng)分下降。

四、Nginx 中/的配置技巧

        proxy_pass 后的 / 會(huì)影響轉(zhuǎn)發(fā)路徑拼接方式，建議保持一致，否則可能造成路徑錯(cuò)亂，此時(shí) /api/user 實(shí)際會(huì)被轉(zhuǎn)發(fā)至 http://localhost:3000/user。

        個(gè)人建議在nginx中永遠(yuǎn)在路徑和路由后加上 / ，基本不會(huì)錯(cuò)。

location /api/ {
  proxy_pass http://localhost:3000/;
}

五、fetch 和 API 請(qǐng)求中的 / 影響

fetch('/api/user')       // 相對(duì)根路徑
fetch('./api/user')      // 相對(duì)當(dāng)前路徑（可能出錯(cuò)）
fetch('https://example.com/api/user') // 絕對(duì)路徑

        Vue 中推薦使用 axios 統(tǒng)一配置：

const instance = axios.create({
  baseURL: '/api/',
})

六、正則表達(dá)式和字符串中的 / 與轉(zhuǎn)義

        在 JavaScript 正則表達(dá)式中，/ 是定界符，若路徑中包含 /，需使用 \/ 進(jìn)行轉(zhuǎn)義。：

const reg = /\/api\/user/; // 匹配 "/api/user"

        字符串中的 / 則不需要轉(zhuǎn)義

const url = "https://example.com/api/user";

七、結(jié)語(yǔ)

        一個(gè)小小的 / 有這么多細(xì)節(jié)可以深挖， 是不是很有意思？如果你是前端開(kāi)發(fā)者，理解 / 的這些細(xì)節(jié)能讓你在寫(xiě)路徑、調(diào)試接口、配置服務(wù)器、優(yōu)化 SEO 時(shí)更游刃有余。

到此這篇關(guān)于JavaScript 中的“ / ”:路徑、資源與目錄、nginx配置、請(qǐng)求、轉(zhuǎn)義全面解析的文章就介紹到這了,更多相關(guān)js 路徑 /內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論