@ 在导入路径中是什么意思？更新

javascript ecmascript-6 vue.js webpack

2022-08-29 23:28:45

我正在开始一个新的vue.js项目，所以我使用vue-cli工具来构建一个新的webpack项目（即）。vue init webpack

当我浏览生成的文件时，我注意到文件中的以下导入：src/router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello' // <- this one is what my qusestion is about

Vue.use(Router)

export default new Router({
    routes: [
        {
            path: '/',
            name: 'Hello',
            component: Hello
        }
    ]
})

我以前没有在路径中看到过 at 符号（）。我怀疑它允许相对路径（也许？），但我想确保我了解它真正的作用。@

我尝试在网上搜索，但无法找到解释（因为搜索“at sign”或使用文字字符作为搜索条件没有帮助）。@

在这个路径中做了什么（链接到文档会很棒），这是一个es6的事情吗？网络包的东西？一个 vue-loader 的东西？@

更新

感谢Felix Kling为我指出了关于同一问题的另一个重复的堆栈溢出问题/答案。

虽然对另一个stackoverflow帖子的评论并不是这个问题的确切答案（在我的情况下，它不是一个babel插件），但它确实为我指出了正确的方向，以找到它是什么。

在 vue-cli 为你启动的基架中，基本 webpack 配置的一部分为 .vue 文件设置了一个别名：

这是有道理的，因为它为您提供了来自src文件的相对路径，并且它消除了导入路径末尾的要求（您通常需要）。.vue

感谢您的帮助！

答案 1

这是通过Webpack resolve.alias配置选项完成的，并且不是特定于Vue的。

在 Vue Webpack 模板中，Webpack 被配置为替换为 src 路径：@/

  const path = require('path');

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

别名用作：

import '@/<path inside src folder>';

答案 2

还要记住，您也可以在 tsconfig 中创建变量：

"paths": {
  "@components": ["src/components"],
  "@scss": ["src/styles/scss"],
  "@img": ["src/assests/images"],
  "@": ["src"],
}

这可以用于命名约定目的：

import { componentHeader } from '@components/header';