例如:

import Component from '@/components/component'

在我看到的代码中,它表现得像../在目录中上升了一层相对于文件路径,但我想知道它是做什么的。不幸的是,由于符号搜索问题,我在网上找不到任何文档。


当前回答

如果你正在使用Typescript,你可以通过简单地使用你的tsconfig来实现。Json是这样的:

{
  "compilerOptions": {

    ...

    "baseUrl": ".",
    "paths": {
      "@lib/*": ["app/lib/*"]
    }
  },
}

其他回答

如果你正在使用Typescript,你可以通过简单地使用你的tsconfig来实现。Json是这样的:

{
  "compilerOptions": {

    ...

    "baseUrl": ".",
    "paths": {
      "@lib/*": ["app/lib/*"]
    }
  },
}

// @是/src的别名

受到Can Rau回答的启发,我在我的src/views/Home中有了类似的发现。vue文件。该文件是使用最新版本(2021年7月,Ubuntu 20.04)创建的:

我“推断”它是/src,但想知道为什么,因为Ben接受的答案说它将是我的项目的根,实际上是/src的父。

这是Home.vue:

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

它是由Vue Webpack模板定义的,这是我从其他SO答案中学到的。

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

我使用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"]

如上所述,默认情况下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"

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