在使用Webpack的Vue.js项目中使用at('@')登录路径进行ES6导入

Question

我正在启动一个新的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的功能吗？一个网络包？vue-loader的事？

感谢Felix Kling指出另一个重复的stackoverflow问题/关于这个问题的答案。

虽然另一个stackoverflow帖子上的评论不是这个问题的确切答案（在我的例子中它不是一个babel插件），但它确实给我指明了正确的方向，以找到它是什么。

这是有意义的，因为它为您提供了来自src文件的相对路径，并且消除了导入路径末尾的.vue的要求（您通常需要）。

谢谢你的帮助！

Answer 1

这是通过Webpackresolve.alias配置选项完成的，并不特定于VUE。

在Vue Webpack模板中，Webpack被配置为将@/替换为src路径：

  const path = require('path');

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

别名用作：

import '@/<path inside src folder>';