檔案路徑問題（ ./ 和 ../ 和 @/ ）

作為前端小白，最近在使用vue腳手架的時候，經常會遇到各種檔案的引用。由於以前沒有特別注意過這類問題，這次就寫個文件給自己參考

PS：本篇文章僅用於 js 與 vue 程式碼的檔案路徑，其他語言的路徑寫法請自行嘗試

---

假如現在有這樣一個文件
a資料夾裡包含b1資料夾和b2資料夾還有c、d、e檔案
b1資料夾裡包含f、j、h檔案
b2資料夾裡包含c1、c2檔案
如下圖：

1. “ . / ”

指的是同級檔案，後面可以跟同一檔案目錄下的檔案

例如：
在c檔案內寫：

"./d" 或 "./e" 

指向的就是同級下的 d檔案 或 e檔案

在c1檔案內寫：

"./c2"

指向的就是同級下的c2檔案

2. “ . . / ”

指的是上一級檔案，也可以稱為父檔案，後面可以跟父檔案目錄下的檔案

例如：
在 c1檔案內寫：

"../d" 或 "../e" 

指向的就是上一級檔案目錄下的 d檔案 或 e檔案，
同理，在b1資料夾下的 f 檔案內寫這兩個路徑，也是指向 d檔案 或 e檔案

3. “ @ / ”

指的是根檔案目錄，後面可以跟其目錄下的檔案

這個我只有在vue腳手架 中才有見到。網上查閱後得知，這個根檔案目錄好像不是固定的，可以手動設定。但我通過那個人的方法並沒有找到我的根檔案目錄，可能因為我們的腳手架版本不同吧（我用的是3.12.1版本），有疑問可以去百度
在這裡我就貼上我見到的例子吧

右側第十行，引入HelloWorld，路徑用到 “ @ / ”，這裡的根檔案目錄指向的就是 src 資料夾。所以我在其他的檔案裡寫路徑也可以直接用 “ @ / ” 來從 src 資料夾往下找，還算是比較方便。