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

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 符号”或使用文字字符 @ 作为搜索条件没有帮助）。

@ 在这条路径上做了什么（链接到文档会很棒），这是 es6 的东西吗？一个 webpack 的东西？一个 vue-loader 的东西？

更新

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

虽然对另一个 stackoverflow 帖子的评论并不是这个问题的确切答案（在我的情况下它不是 babel 插件），但它确实为我指明了正确的方向来找到它是什么。

在 vue-cli 为您创建的脚手架中，部分基本 webpack 配置为 .vue 文件设置了别名：

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

谢谢您的帮助！

原文由 Chris Schmitz 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

   const path = require('path');

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

别名用作：

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

原文由 Estus Flask 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

另请记住，您也可以在 tsconfig 中创建变量：

 "paths": {
  "@components": ["src/components"],
  "@scss": ["src/styles/scss"],
  "@img": ["src/assests/images"],
  "@": ["src"],
}

这可用于命名约定目的：

 import { componentHeader } from '@components/header';

原文由 Tyler Canton 发布，翻译遵循 CC BY-SA 4.0 许可协议