Question

例如：

import Component from '@/components/component'

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

Answer 1

模块标识符的含义和结构取决于模块加载程序或模块bundler 。模块加载器不是ECMAScript规范的一部分。从JavaScript语言的角度来看，模块标识符完全不透明。所以它实际上取决于您使用的模块加载器/捆绑器。

你的webpack / babel配置中很可能有类似babel-plugin-root-import的内容。

基本上它意味着来自项目根目录的 ..它避免了写import Component from '../../../../components/component'

之类的东西

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

Answer 2

知道它已经过时了，但我不确定它是如何定义的，所以查了一下，来了，挖得更深一点，最后在Vue-CLI（Vue.js）生成的Webpack中找到了这个配置

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

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

Answer 3

让Ben的答案更加全面：

首先，您需要在babel-plugin-root-import的{{1}}中添加devDependencies（如果使用package.json：yarn）。然后在yarn add devDependencies --dev中将以下行添加到.babelrc键：

plugins

现在，您可以使用"plugins": [ [ "babel-plugin-root-import", { "rootPathPrefix": "@" } ] ]。例如：

而不是

@

你可以

import xx from '../../utils/somefile'

Answer 4

如上所述，默认情况下，此功能不在JS中。你必须使用一个babel插件来享受它。它的工作很简单。它允许您为JS文件指定默认根源，并帮助您将文件导入映射到它。要通过npm：

开始安装

npm install babel-plugin-root-import --save-dev

或

yarn add babel-plugin-root-import --dev

在您应用的根目录中创建.babelrc并根据您的喜好配置这些设置：

{ "plugins": [ ["babel-plugin-root-import", { "rootPathSuffix": "the-preffered/root/of-all-your/js/files", "rootPathPrefix": "@" }] ] }

使用上面的配置，您只需从该源导入，如：

import Myfile from "@/Myfile"

没有做所有这些时髦的事情：

"/../../../Myfile"

请注意，您也可以将符号更改为"~"之类的任何内容，如果它飞过你的船。

Answer 5

我正在使用VS代码来构建React Native Apps。

您需要的是：

在您应用的根路径下创建一个jsconfig.json
在您的jsconfig.json文件中，添加以下代码：

{ “ compilerOptions”：{ “ baseUrl”：“。”， “ target”：“ ES6”， “ module”：“ commonjs”， “路径”：{ “ @ / ”：[“ src / ”]， “ @ components / ”：[“ src / components / ”]， “ @ core / ”：[“ src / core / ”] } }， “排除”：[“ node_modules”] }

基本上像“快捷方式”：[“ abs_path”]

Answer 6

这是一种重新映射模块路径的方法，而不是ES本身的一部分，您必须使用babel导入功能。

Answer 7

// @ is an alias to /src

受 Can Rau 回答的启发，我在 src/views/Home.vue 文件中发现了类似的发现。此文件是使用最新（2021 年 7 月，Ubuntu 20.04）版本创建的：npx @vue/cli create myfirstvue --default。

我“推断”它是 /src 但想知道为什么，因为 Ben 的 accepted answer 说这将是我项目的根，实际上是父, /src。

这是 Home.vue：

...
<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
</script>

它由 Vue Webpack template 定义，这是我从 this other SO answer 中学到的。