vuejs webpack模板里import路径中@符号是什么意思

Question

用vuejs的webpack模板生成的项目中，router/index.js里面有一句：

import Hello from '@/components/Hello'

这里路径前面的“@”符号表示什么意思？

Answer 1

@ 等价于 /src 这个目录，免得你写麻烦又易错的相对路径

参见本人知乎专栏文章：学习 Vue 你需要知道的 webpack 知识（一）

Answer 2

没事儿就去看看vue模板的代码，里面都有，这是webpack的路径别名，相关定义在这里：

resolve: {
    // 自动补全的扩展名
    extensions: ['.js', '.vue', '.json'],
    // 默认路径代理
    // 例如 import Vue from 'vue'，会自动到 'vue/dist/vue.common.js'中寻找
    alias: {
        '@': resolve('src'),
        '@config': resolve('config'),
        'vue$': 'vue/dist/vue.common.js'
    }
}

Answer 3

最新的vue-cli配置@符号，'@': resolve('src')这块代码在下面这个文件中
......\node_modules\@vue\cli-service\lib\config\base.js

https://github.com/vuejs/vue-cli/blob/f0f254e4bc81ed322eeb9f7de346e987e845068e/packages/%40vue/cli-service/lib/config/base.js#L43C38-L43C38