在vuejs里,我们在引用模板插件的时候,会用到"@"符号,如下代码:
import Hello from '@/components/Hello'
它是什么意思呢?其实很简单,这是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'
}
}
此段代码一般在vuejs项目里的build目录下webpack.base.conf.js里,大家可以去看下,它的含义其实就是js里的src。
在vuejs里,很多这种应用,比如扩展名.vue\.js\.json,这样做的好处就是可以大大的减少代码量;在平常的项目里,我们自己也可以去定义一些变量做同样的处理。