在使用Webpack的vue.js项目中使用（'@'）loginES6导入path

我开始了一个新的vue.js项目，所以我使用vue-cli工具来构build一个新的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 } ] }) 

我之前没有看到路标（ @ ）。 我怀疑它允许相对path（也许？），但我想确定我明白它真正的作用。

我试图在网上search，但无法find解释（因为search“在符号”或使用文字字符@没有帮助作为search条件）。

@在这条路上做什么（链接到文档将是太棒了），这是一个es6的东西？ 一个webpack的东西？ 一个vue加载器的东西？

UPDATE

感谢Felix Kling将我指向另一个关于同一个问题的重复的stackoverflow问题/回答。

虽然在其他stackoverflowpost的评论是不是这个问题的确切答案（这不是一个巴贝尔插件在我的情况下）它确实指向我在正确的方向find它是什么。

在vue-cli为您启动的脚手架中，基本webpackconfiguration的一部分为.vue文件设置了一个别名：

这是有道理的，因为它给了你一个从src文件的相对path，它消除了导入path末尾的.vue需求（你通常需要）。

谢谢您的帮助！

Answer 1

这是用Webpack的resolve.aliasconfiguration选项完成的，并不是特定于Vue的。

在Vue Webpack模板中 ，Webpack被configuration为将@/replace为srcpath ：

  resolve: { extensions: ['.js', '.vue', '.json'], alias: { ... '@': resolve('src'), } }, ...