我正在开始一个新的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符号()。我怀疑它允许相对路径(也许吗?),但是我想确保我了解它的真正作用。
我尝试在网上搜索,但找不到解释(可能是因为搜索“在符号处”或使用文字字符@
不能用作搜索条件)。
这@
条路径的作用是什么(链接到文档非常好),这是es6吗?一个webpack的东西?vue-loader东西?
感谢Felix Kling向我指出了另一个重复的stackoverflow问题/关于同一问题的答案。
虽然在其他stackoverflow帖子上的评论不是该问题的确切答案(在我看来,这不是babel插件),但确实为我指明了正确的方向。
在为您准备的vue-cli脚手架中,基本的webpack配置的一部分为.vue文件设置了别名:
这样做既有道理,也为您提供了src文件中的相对路径,并且消除.vue
了导入路径末尾对的要求(通常需要这样做)。
谢谢您的帮助!
这是通过Webpack resolve.alias
配置选项完成的,并不特定于Vue。
在Vue Webpack模板中,Webpack配置为替换@/
为src
path:
const path = require('path');
...
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
...
'@': path.resolve('src'),
}
},
...
别名用作:
import '@/<path inside src folder>';
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句