@ 汇入档案

@ 是路径的别名，通常会指的是 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!