檔案匯入匯出 Import / Export

框架 Framework: Vue.js 檔案匯入匯出 Import / Export
Categories:
Tags:

@ 匯入檔案

@ 是路徑的別名，通常會指的是 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'

參考資料