@ 在导入路径中是什么意思? [英] What does the @ mean inside an import path?

问题描述

我正在开始一个新的 vue.js 项目，所以我使用 vue-cli 工具搭建了一个新的 webpack 项目(即 vue init webpack).

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

从'vue'导入Vue从vue-router"导入路由器import Hello from '@/components/Hello'//<- 这就是我的问题Vue.use(路由器)导出默认的新路由器({路线:[{小路: '/'，name: '你好',组件:你好}]})

我以前从未在路径中看到 at 符号 (@).我怀疑它允许使用相对路径(也许?)但我想确保我了解它的真正作用.

我尝试在网上搜索但找不到解释(可能是因为搜索at 符号"或使用文字字符 @ 作为搜索条件无济于事).

@ 在这个路径中做了什么(链接到文档会很棒)，这是 es6 的东西吗?一个 webpack 的东西?一个 vue-loader 的东西?

更新

感谢 Felix Kling 为我指出关于同一问题的另一个重复的 stackoverflow 问题/答案.

虽然对另一个 stackoverflow 帖子的评论并不是这个问题的确切答案(在我的例子中它不是 babel 插件)，但它确实为我指明了正确的方向来找到它是什么.

在 vue-cli 为你制作的脚手架中，基础 webpack 配置的一部分为 .vue 文件设置了一个别名:

这是有道理的，因为它为您提供了来自 src 文件的相对路径 它在导入结束时删除了 .vue 的要求路径(您通常需要).

感谢您的帮助！

解决方案

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

在Vue Webpack模板中，配置Webpack替换@/ 与 src 路径:

 const path = require('path');...解决: {扩展名:['.js', '.vue', '.json'],别名:{...'@': path.resolve('src'),}},...

别名用作:

import '@/';

I'm starting out a new vue.js project so I used the vue-cli tool to scaffold out a new webpack project (i.e. vue init webpack).

As I was walking through the generated files I noticed the following imports in the src/router/index.js file:

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
        }
    ]
})

I've not seen the at sign (@) in a path before. I suspect it allows for relative paths (maybe?) but I wanted to be sure I understand what it truly does.

I tried searching around online but wasn't able to find an explanation (prob because searching for "at sign" or using the literal character @ doesn't help as search criteria).

What does the @ do in this path (link to documentation would be fantastic) and is this an es6 thing? A webpack thing? A vue-loader thing?

UPDATE

Thanks Felix Kling for pointing me to another duplicate stackoverflow question/answer about this same question.

While the comment on the other stackoverflow post isn't the exact answer to this question (it wasn't a babel plugin in my case) it did point me in the correct direction to find what it was.

In in the scaffolding that vue-cli cranks out for you, part of the base webpack config sets up an alias for .vue files:

This makes sense both in the fact that it gives you a relative path from the src file and it removes the requirement of the .vue at the end of the import path (which you normally need).

Thanks for the help!

解决方案

This is done with Webpack resolve.alias configuration option and isn't specific to Vue.

In Vue Webpack template, Webpack is configured to replace @/ with src path:

  const path = require('path');

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

The alias is used as:

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

这篇关于@ 在导入路径中是什么意思?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！