我正在开始一个新的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
}
]
})
我之前没有在路径中看过at符号( @
) . 我怀疑它允许相对路径(也许?)但我想确定我理解它真正的作用 .
我尝试在线搜索,但无法找到解释(因为搜索"at sign"或使用文字字符 @
没有帮助作为搜索条件) .
@
在这条路径中做了什么(链接到文档会很棒)这是一个es6的事情吗?一个webpack的东西?一个vue-loader的东西?
更新
感谢Felix Kling指出我关于同一个问题的另一个重复的stackoverflow问题/答案 .
虽然对其他stackoverflow帖子的评论不是这个问题的确切答案(在我的情况下它不是一个babel插件)但它确实指出了我找到它的正确方向 .
在vue-cli为你挑选的脚手架中,基本webpack配置的一部分为.vue文件设置了一个别名:
这有意义,因为它为您提供了src文件的相对路径,并且在导入路径(您通常需要)的末尾删除了 .vue
的要求 .
谢谢您的帮助!
1 回答
这是通过Webpack resolve.alias配置选项完成的,并不是特定于Vue .
In Vue Webpack template,Webpack配置为用src path替换
@/
: