Por ejemplo:
import Component from '@/components/component' En el código que estoy viendo, se comporta como ../ subiendo un nivel en el directorio en relación con la ruta del archivo, pero me gustaría saber más en general qué hace. Desafortunadamente, no puedo encontrar ninguna documentación en línea debido al problema de búsqueda de símbolos.
El significado y la estructura del identificador del módulo dependen del cargador de módulos o del paquete de módulos . El cargador de módulos no forma parte de la especificación ECMAScript. Desde la perspectiva del lenguaje JavaScript, el identificador del módulo es completamente opaco. Por lo tanto, realmente depende del cargador/empaquetador de módulos que esté utilizando.
Lo más probable es que tenga algo como babel-plugin-root-import en su configuración webpack/babel.
Básicamente significa desde la raíz del proyecto ... evita tener que escribir cosas como import Component from '../../../../components/component'
Editar: una razón por la que existe es porque import Component from 'components/component' no hace eso, sino que busca en la carpeta node_modules
Sé que es antiguo, pero no estaba exactamente seguro de cómo se define, así que lo busqué, me acerqué, profundicé un poco más y finalmente encontré esto en mi configuración de Webpack generada por Vue-CLI ( Vue.js ).
resolve: { extensions: ['.js', '.vue', '.json'], alias: { '@': path.join(__dirname, '..', dir) } },por lo que es un alias que en este caso apunta a la raíz del directorio src generado por vue-cli del proyecto
Para que la respuesta de Ben sea más completa:
Primero debe agregar babel-plugin-root-import en sus devDependencies en package.json (si usa yarn : yarn add babel-plugin-root-import --dev ). Luego, en su .babelrc agregue las siguientes líneas en la clave de plugins :
"plugins": [ [ "babel-plugin-root-import", { "rootPathPrefix": "@" } ] ] Ahora, puede usar @ . Por ejemplo:
En vez de
import xx from '../../utils/somefile'
Puede
import xx from '@/utils/somefile'