为了让本的回答更全面:

首先你需要在你的devDependencies包中添加babel-plugin-root-import。如果使用yarn: yarn添加babel-plugin-root-import——dev)。 然后在你的.babelrc中将以下代码行添加到插件键中:

"plugins": [
[
  "babel-plugin-root-import",
  {
    "rootPathPrefix": "@"
  }
]
]

现在，你可以使用@。例如:

而不是

从“../../utils/somefile”导入xx

你可以

从“@/utils/somefile”导入xx

我使用VS代码来构建react原生应用程序。

你需要的是:

创建一个jsconfig。json在你的应用的根路径下

在jsconfig中。Json，添加以下代码:

{
  "compilerOptions": {
    "baseUrl": ".",
    "target": "ES6",
    "module": "commonjs",
    "paths": {
      "@/*": ["src/*"],
      "@components/*": ["src/components/*"],
      "@core/*": ["src/core/*"]
    }
  },
  "exclude": ["node_modules"]
}

基本上就像"shortcut": ["abs_path"]

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

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

因此，它是一个别名，在本例中指向vue-cli生成的项目SRC目录的根目录

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

为了让本的回答更全面:

首先你需要在你的devDependencies包中添加babel-plugin-root-import。如果使用yarn: yarn添加babel-plugin-root-import——dev)。 然后在你的.babelrc中将以下代码行添加到插件键中:

"plugins": [
[
  "babel-plugin-root-import",
  {
    "rootPathPrefix": "@"
  }
]
]

现在，你可以使用@。例如:

而不是

从“../../utils/somefile”导入xx

你可以

从“@/utils/somefile”导入xx

它是一种重新映射模块路径的方式，而不是ES本身的一部分，你必须使用babel导入特性。

如上所述，默认情况下JS中没有这个特性。你必须使用通天塔插件才能享受它。它的工作很简单。它允许你为你的JS文件指定一个默认的根源，并帮助你将你的文件导入映射到它。 通过npm开始安装:

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

or

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

在你的应用程序的根目录中创建一个.babelrc，并根据你的喜好配置这些设置:

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

通过上面的配置，你可以简单地从源代码导入:

import Myfile from "@/Myfile" 

不用做这些古怪的事情:

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

注意，如果可以的话，还可以将符号更改为“~”之类的任何符号。