@ 匯入檔案

@ 是路徑的別名，通常會指的是 src 路徑

在 Vue 的 webpack 或 vite 設定檔案會將 @ 指定別名為 src 路徑

{
  resolve: {
    alias: {
      '@': path.resolve('src'),
    }
  },
}

所以下面兩個匯入的方式基本上是相同的

import Hello from '@/components/Hello'
import Hello from 'src/components/Hello'

只是因為元件同常會在不同一層的路徑，導致要回到原本的 src 路徑需要跳很多層，所以用 @ 可以統一將路徑跳到 src，在匯入路徑 上也比較好管理

// 避免發生這樣的狀況
import Hello from 'src/components/Hello'
import Hello from '../src/components/Hello'
import Hello from '../../src/components/Hello'
import Hello from '../../../src/components/Hello'

參考資料

• javascript - What does the @ mean inside an import path? - Stack Overflow

Donate KJ 贊助作者喝咖啡

如果這篇文章對你有幫助的話，可以透過下面支付方式贊助作者喝咖啡，如果有什麼建議或想說的話可以贊助並留言給我

If this article has been helpful to you, you can support the author by treating them to a coffee through the payment options below. If you have any suggestions or comments, feel free to sponsor and leave a message for me!