【问题标题】：What does the @ mean inside an import path?导入路径中的 @ 是什么意思？
【发布时间】：2018-02-11 11:52:25
【问题描述】：

我正在开始一个新的 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 的要求（您通常需要）。

感谢您的帮助！

【问题讨论】：

See my comment.
@FelixKling 这不是完全重复的，因为它没有回答整个问题，这是 es6 的东西吗？一个 webpack 的东西？一个 vue-loader 的东西？
是的，我认为这个问题很相似，但不是重复的。不管我弄清楚它的来源并用解释更新了问题，因为我无法将其添加为答案。
@estus：答案很清楚它不是 ES6 的一部分，而是 webpack 配置的东西，你不觉得吗？这也正是这里的情况，只是配置的性质有点不同。
@FelixKling 这取决于。但是由于您链接的问题没有详细的答案来解释 Webpack 的情况，因此它可能值得一个答案。通常有 'Possible duplicate of ...' 评论足以指定问题之间的联系，其余的由 vox populi 完成。我经常看到这些问题在 SO 上被过度欺骗了。

标签： javascript webpack ecmascript-6 vue.js

【解决方案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>';

【讨论】：

JavaScript 不再是 JavaScript。 Babel/webpack 为我们提供了这种科学怪人语言，并且不知何故，新开发人员应该知道 ECMAScript 规范的结束位置和用户空间插件/转换的开始位置。真的很伤心，imo。
@naomik 是否将此类技巧引入设置取决于用户。这对 Vue 来说没什么大不了的，因为它依赖于它的自定义 .vue 文件格式。
我个人认为，如果你愿意，可以增加灵活性是一件好事。我认为它不像科学怪人，而更像是 voltron。您可以像狮子一样做事，也可以将不同的狮子组合在一起以拥有更大的机器人。是的，有时你会遇到这样的问题，但并不是找不到答案。真的，你可以对任何规模的项目采取 frankenstein 或 voltron 的观点，这只是“使用和理解依赖关系”。
@ChrisSchmitz 这取决于上下文和视角。这样做会限制项目使用 Webpack。如果项目打算在它们到来时使用原生 ES6 模块，或者它是 Node，CommonJS 可以用于模块，这可能不是一件好事。另一方面，较长的相对路径可能更难维护和重构。
当使用vue-cli v3+ 时，您应该使用~@ 来引用src 文件夹。例如：$font-path: '~@/assets/fonts/';

【解决方案2】：

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

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

这可用于命名约定目的：

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

【讨论】：

但是这种别名将在源 JS 中保持空白，然后在运行时您需要有一个包装器进行调解以使别名工作。也许有一种方法可以通过 babel 让这个 TS 语法在构建时得到转换？ Typescript 的tsc 不是，因此您需要module-alias 或tsconfig-paths 之类的东西。
添加此设置后，vs代码无法解析路径，点击导入的模块时无法进入文件。

【解决方案3】：

我通过以下组合克服了

import HelloWorld from '@/components/HelloWorld'
=>
import HelloWorld from 'src/components/HelloWorld'

IDE 将停止警告 uri，但这会在编译时导致 uri 无效，在“build\webpack.base.conf.js”中

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

宾果！

【讨论】：

【解决方案4】：

解析('src') 对我没有用但 path.resolve('src') 作品

resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': path.resolve('src')
    },
    extensions: ['*', '.js', '.vue', '.json']
  },

【讨论】：

【解决方案5】：

也许尝试在 webpack 中添加。 mix.webpackConfig 引用 laravel mix。

mix.webpackConfig({

    resolve: {
        alias: {
            '@imgSrc': path.resolve('resources/assets/img')
        }
    }
});

然后在vue中使用。

<img src="@imgSrc/logo.png" />

【讨论】：

【解决方案6】：

一定有什么改变了。这里给出的答案不再正确。第 9 章中的 This project 在其导入语句中使用了 @ 符号，但 webpack.config.js 文件没有路径解析语句：

let service = process.VUE_CLI_SERVICE

if (!service || process.env.VUE_CLI_API_MODE) {
  const Service = require('./lib/Service')
  service = new Service(process.env.VUE_CLI_CONTEXT || process.cwd())
  service.init(process.env.VUE_CLI_MODE || process.env.NODE_ENV)
}

module.exports = service.resolveWebpackConfig()

【讨论】：