Import / Export

Framework: Vue.js Import / Export
Categories:
Tags:

@ import file

@ is the alias path like src path

In the Vue.js Webpack or vite configuration file, the @ will be specify as src path

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

So basically, there is the same result of the import file below

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

But the component usually in different folder and different path, so it is difficult to import file base on src folder.

So using alias path @ will be easy for us to manage the import file.

// Try to prevent import like this
import Hello from 'src/components/Hello'
import Hello from '../src/components/Hello'
import Hello from '../../src/components/Hello'
import Hello from '../../../src/components/Hello'
// Better way to import file base on src folder
import Hello from '@/components/Hello'

Reference