在Vue项目导入路径中@符号是什么意思?

我开始了一个新的vue.js项目，所以我使用vue-cli工具脚手架出一个新的webpack项目(即vue init webpack)。
当我浏览生成的文件时，我注意到src/router/index.js文件中有以下导入:

import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello' // <- this one is what my qusestion is about
 
Vue.use(Router)
 
export default new Router({
    routes: [
        {
            path: '/',
            name: 'Hello',
            component: Hello
        }
    ]
})

这是通过Webpack解析完成的。别名配置选项。
在Vue Webpack模板中，Webpack被配置为将@/替换为src路径: 

vue.conifg.js

  const path = require('path');
 
  ...
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      ...
      '@': path.resolve('src'),
    }
  },
  ...

  别名使用如下:

import '@/';

 或者你也可以在tsconfig中创建变量:

"paths": {
  "@components": ["src/components"],
  "@scss": ["src/styles/scss"],
  "@img": ["src/assests/images"],
  "@": ["src"],
}

这可以用于命名约定:

import { componentHeader } from '@components/header';