¿Qué significa @ dentro de una ruta de importación?

Estoy comenzando un nuevo proyecto vue.js, así que utilicé la herramienta vue-cli para desarrollar un nuevo proyecto de paquete web (es decir,vue init webpack ).

Mientras revisaba los archivos generados, noté las siguientes importaciones en el src/router/index.jsarchivo:

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

No he visto la arroba (@ ) en una ruta. Sospecho que permite rutas relativas (¿tal vez?), pero quería estar seguro de entender lo que realmente hace.

Intenté buscar en línea pero no pude encontrar una explicación (probablemente porque busqué "arroba" o usé el carácter literal@ no ayuda como criterio de búsqueda).

Lo que hace el@ en esta ruta (el enlace a la documentación sería fantástico)? ¿Es esto algo de es6? ¿Una cosa de paquete web? ¿Una cosa del cargador de vue?

ACTUALIZAR

Gracias Felix Kling por señalarme otra pregunta/respuesta duplicada de stackoverflow sobre esta misma pregunta.

Si bien el comentario en la otra publicación de stackoverflow no es la respuesta exacta a esta pregunta (no era un complemento de Babel en mi caso), me indicó la dirección correcta para encontrar qué era.

En el andamio que vue-cli crea para usted, parte de la configuración base del paquete web configura un alias para los archivos .vue:

Ubicación del alias dentro del proyecto

Esto tiene sentido tanto por el hecho de que le proporciona una ruta relativa desde el archivo src como por el hecho de que elimina el requisito del.vue al final de la ruta de importación (que normalmente necesita).

¡Gracias por la ayuda!

Mar 12 '17 23:03 Chris Schmitz

Esto se hace con resolve.aliasla opción de configuración de Webpack y no es específico de Vue.

En la plantilla de Vue Webpack , Webpack está configurado para reemplazar @/con srcla ruta :

  const path = require('path');

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

El alias se utiliza como:

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

Mar 12 '2017 20:03 Estus Flask

También tenga en cuenta que también puede crear variables en tsconfig:

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

Esto se puede utilizar para propósitos de convención de nomenclatura:

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

Apr 19 '2019 15:04 Tyler Canton

Termino con la siguiente combinación

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

El IDE dejará de advertir el uri, pero esto provocará un uri no válido al compilar, en "build\webpack.base.conf.js".

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

Expandir fragmento

¡Bingú!

Jun 12 '2019 14:06 Luân Trương

Quizás intente agregar un paquete web. mix.webpackConfig hace referencia a laravel mix .

mix.webpackConfig({

    resolve: {
        alias: {
            '@imgSrc': path.resolve('resources/assets/img')
        }
    }
});

Y luego en uso vue.

<img src="@imgSrc/logo.png" />

May 22 '2020 17:05 Paul