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

Mientras recorría 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 antes el signo ( @) en un camino. Sospecho que permite caminos relativos (¿tal vez?) Pero quería estar seguro de entender lo que realmente hace.

Traté de buscar en línea pero no pude encontrar una explicación (problema porque buscar "en el signo" o usar el carácter literal @no ayuda como criterio de búsqueda).

¿Qué hace el @en esta ruta (el enlace a la documentación sería fantástico) y es esto una cosa es6? ¿Una cosa de paquete web? ¿Una cosa de vue-loader?

ACTUALIZAR

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

Si bien el comentario en la otra publicación de stackoverflow no es la respuesta exacta a esta pregunta (no fue un complemento de babel en mi caso), me señaló en la dirección correcta para encontrar lo que era.

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

Esto tiene sentido tanto en el hecho de que le proporciona una ruta relativa desde el archivo src y elimina el requisito de .vueal final de la ruta de importación (que normalmente necesita).

¡Gracias por la ayuda!

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

En la plantilla Vue Webpack , Webpack está configurado para reemplazar @/con la srcruta :

  const path = require('path');

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

El alias se usa como:

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

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 fines de convenciones de nombres:

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

Termino con la siguiente combinación

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

IDE dejará de advertir la uri, pero esto causa una uri no válida cuando se compila, en "build \ webpack.base.conf.js"

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

Bingoo!

resolver ('src') no funciona para mí, pero path.resolve ('src') funciona

resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': path.resolve('src')
    },
    extensions: ['*', '.js', '.vue', '.json']
  },

Tal vez intente agregar en el paquete web. mix.webpackConfig hace referencia a laravel mix .

mix.webpackConfig({

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

Y luego en vue uso.

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