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

Question

我正在启动一个新的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加载程序？

感谢Felix Kling给我指了另一个重复的stackoverflow问题/答案。

虽然另一篇stackoverflow帖子上的评论并不是这个问题的确切答案（在我的例子中，它不是一个babel插件），但它确实为我指明了正确的方向，让我找到了它。

在vue-cli为您提供的脚手架中，基本webpack配置的一部分为. vue文件设置了一个别名：

这很有意义，因为它为您提供了src文件的相对路径，并且删除了导入路径末尾的.vue要求（您通常需要）。

谢谢你的帮助！

Answer 1

我接受了下面的组合

import HelloWorld from '@/components/HelloWorld'
=>
import HelloWorld from 'src/components/HelloWorld'

IDE将停止警告uri，但这将导致编译时在"build\webpack.base.conf.js"中无效uri

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

Answer 2

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

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

这可用于命名约定目的：

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

Answer 3

这是通过Webpackresolve.aliasconfiguration选项完成的，并不特定于Vue。

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

  const path = require('path');

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

别名用于：

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