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

例如:

import Component from '@/components/component'

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

当前回答

// @是/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答案中学到的。

其他回答

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

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

基本上，这意味着从项目的根源…它避免了从'../../../ components/ Component '中导入Component之类的东西

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

// @是/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答案中学到的。

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

{
  "compilerOptions": {

    ...

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

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

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

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

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

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

推荐文章