@ 符号在 javascript 导入中有什么作用？

Question

例如：

 import Component from '@/components/component'

在我正在查看的代码中，它的行为类似于 ../ 在目录中相对于文件路径向上一级，但我想更一般地了解它的作用。不幸的是，由于符号搜索问题，我无法在网上找到任何文档。

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

Answer 1

模块标识符的含义和结构取决于 模块加载器 或 模块打包 器。模块加载器不是 ECMAScript 规范的一部分。从 JavaScript 语言的角度来看，模块标识符是完全不透明的。所以这真的取决于你使用的是哪个模块加载器/捆绑器。

你很可能在你的 webpack/babel 配置中有类似 babel-plugin-root-import 的东西。

基本上它意味着 从项目的根..它避免了写像 import Component from '../../../../components/component' 这样的东西

编辑： 它存在的一个原因是因为 import Component from 'components/component' 不这样做而是在 node_modules 文件夹中搜索

原文由 Ben 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

知道它很旧，但我不确定它是如何定义的，所以查了一下，过来，挖得更深一点，最后在我的 Vue-CLI ( Vue.js ) 生成的 Webpack 配置中找到了它

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

所以它是一个别名，在这种情况下指向 vue-cli 生成的项目 src 目录的根目录

更新：正如@aderchox 在评论中正确提到的那样，这是一个通用的 Webpack 功能，不限于 Vue

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