javascript - 导入路径中的 @ 是什么意思？

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 符号 (@)。我怀疑它允许相对路径(也许？)，但我想确保我了解它的真正作用。

我试着在网上搜索，但没能找到解释(可能是因为搜索“at sign”或使用字面字符 @ 作为搜索条件没有帮助)。

@ 在此路径中做了什么(链接到文档会很棒)，这是 es6 的东西吗？一个 webpack 的东西？一个 vue-loader 的东西？

更新

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

虽然对其他 stackoverflow 帖子的评论不是这个问题的确切答案(在我的例子中它不是 babel 插件)，但它确实为我指明了正确的方向以找到它是什么。

在 vue-cli 为您制作的脚手架中，基本 webpack 配置的一部分为 .vue 文件设置了一个别名:

这很有意义，因为它为您提供了 src 文件的相对路径并且它在导入结束时删除了 .vue 的要求路径(你通常需要)。

感谢您的帮助!

Answer 1

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

In Vue Webpack template ，Webpack 配置为将 @/ 替换为 src path :

  const path = require('path');

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

别名用作:

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