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

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

一、路徑中 / 的含義

1、 / 所扮演的角色

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

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

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

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

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

3、相對路徑 vs 絕對路徑

        一個表格講清楚：

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

4、相對路徑中的 . 與 ..

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

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

二、Vue中 / 的特殊作用

1、Vue Router 中的 /

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

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

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

2、Vue 項目構(gòu)建時的 base 配置

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

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

三、SEO 對 / 的敏感性

        搜索引擎（如 Google、Baidu）會把下面兩個路徑視為兩個不同的頁面：

• /blog
• /blog/

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

四、Nginx 中/的配置技巧

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

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

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

五、fetch 和 API 請求中的 / 影響

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

        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é)語

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

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