Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

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

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

Mientras revisaba los archivos generados, noté las siguientes importaciones en el archivo 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 } ] })

No he visto el signo de arroba ( @ ) en una ruta antes. Sospecho que permite rutas relativas (¿quizás?) pero quería asegurarme de entender lo que realmente hace.

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

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

ACTUALIZAR

Gracias Felix Kling por indicarme 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 (en mi caso, no era un complemento de Babel), me indicó la dirección correcta para encontrar qué era.

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

Ubicación de alias dentro del proyecto

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

¡Gracias por la ayuda!

over 4 years ago · Santiago Trujillo
3 Respuestas
Responde la pregunta

0

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

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

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

El alias se utiliza como:

 import '@/<path inside src folder>';
over 4 years ago · Santiago Trujillo Denunciar

0

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 convención de nomenclatura:

 import { componentHeader } from '@components/header';
over 4 years ago · Santiago Trujillo Denunciar

0

Supero con la siguiente combinación

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

IDE dejará de advertir el uri, pero esto provoca un uri no válido cuando se compila, en "build\webpack.base.conf.js"

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

¡Bingú!

over 4 years ago · Santiago Trujillo Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda