vuejs中的小老鼠(at)符號代表什麼

前言

一般來講我們在開發Vue Cli會很常使用一些方式來取得檔案來源,舉凡”@”及常見的”..”,這兩者又有甚麼差異呢?這邊做一下紀錄:D

@(at)

我們在開發Vue Cli時常常會引入組件 (components),所以可以常見這樣寫

1
import Hello from '@/components/Hello';

那 “@” 代表什麼?

這時候我們可以去找尋 webpack 的相關設定檔,這邊要注意 Vue Cli 2 與 Vue Cli 3 放置 webpack 相關設定檔的位子並不同。

Vue Cli 3

在這一版 webpack 相關的東西被放在 node_modules 中,那麼因為本身 Vue 也不希望你去做任何的調整,所以才會跟 Vue Cli 2 不太一樣,首先我們可以去找看看 “@” 到底是在哪裡做設定的,而這個檔案相關路徑是 project\node_modules\@vue\cli-service\lib\config\base.js,大約 49 行可以找到 .set('@', api.resolve('src')) (紅色毛毛蟲請忽略,這是因為我使用了比較嚴格的 ESlint)。

這時候如果我們將 “@” 改成 “@@” 並重新啟動Cli呢?

這時候你會發現跟它會跟你講說它無法解析模板

那麼要解決這個問題的話就將原本我們在使用 “@” 的地方改成 “@@” 就可以哩

最後做一下總結,我們回過頭來看 base.js 的 .set('@', api.resolve('src')), 由這個範例可以了解到 “@” 在 Vue Cli 3 中是指向 src 這個目錄,所以如果目錄太多層的時候,就可以直接使用 @ 從最上層目錄往下找檔案,而不是從本身目錄一路 ../../.. 到自己要的檔案來源。

Vue Cli 2

那 Vue Cli 2 關於 “@” 的相關設定呢?檔案路徑在這裡 project\build\webpack.base.conf.js, 大約 38 行左右可以看到 '@': resolve('src'),, 其觀念也是與 Vue Cli 3 一樣,所以這邊就不在多做測試了。

那關於…(點點點)呢?

關於點點點在的觀念其實很簡單,就是以檔案本身的本身去找其他檔案,但是這個方式通常會有一個缺點,當本身檔案過於深層時,再找其他檔案就會顯得超級麻煩(../../../../Hello.vue),這種時候就會建議使用 “@”。

補充

另外可以發現 router.js、main.js 等等,引入 components 的時候大多都是使用 “..”,當然這邊也是可以使用 “@”,如果你有開啟 ESlint,你會發現它會跟你講說它無法解析模板,可是實際編譯後卻可以正常使用,這是一個滿奇妙的地方,但是通常我們這邊是比較不會使用到 “@”, 因為本身 router.js 就已經在所有目錄的頂層了,所以沒有必要使用到 “@”。

可以給點牡蠣。
Google AD