Estou iniciando um novo projeto vue.js, então usei a ferramenta vue-cli para criar um novo projeto de webpack (por exemplo vue init webpack).

Enquanto eu andava pelos arquivos gerados, notei as seguintes importações no src/router/index.jsarquivo:

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

Eu nunca vi o sinal de arroba ( @) em um caminho antes. Eu suspeito que ele permita caminhos relativos (talvez?), Mas eu queria ter certeza de que entendi o que ele realmente faz.

Tentei pesquisar on-line, mas não consegui encontrar uma explicação (provavelmente porque pesquisar por "arroba" ou usar o caractere literal @não ajuda como critério de pesquisa).

O que @faz nesse caminho (o link para a documentação seria fantástico) e isso é uma coisa es6? Uma coisa do webpack? Uma coisa vue-loader?

ATUALIZAR

Obrigado Felix Kling por me apontar para outra pergunta / resposta duplicada sobre o stackoverflow sobre essa mesma pergunta.

Embora o comentário na outra postagem do stackoverflow não seja a resposta exata para essa pergunta (não era um plugin babel no meu caso), ele me apontou na direção correta para encontrar o que era.

Nos andaimes que o vue-cli cria para você, parte da configuração básica do webpack define um alias para os arquivos .vue:

Isso faz sentido, pois fornece um caminho relativo a partir do arquivo src e remove o requisito do .vueno final do caminho de importação (que normalmente você precisa).

Obrigado pela ajuda!

Isso é feito com a resolve.aliasopção de configuração do Webpack e não é específico do Vue.

No modelo Vue Webpack , o Webpack está configurado para substituir @/pelo srccaminho :

  const path = require('path');

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

O alias é usado como:

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

Lembre-se também de que você pode criar variáveis ​​no tsconfig:

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

Isso pode ser utilizado para fins de convenção de nomenclatura:

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

Eu acabo com a seguinte combinação

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

O IDE deixará de avisar a interface do usuário, mas isso causará uma interface inválida ao compilar, em "build \ webpack.base.conf.js"

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

Bingoo!

resolve ('src') não funciona para mim, mas path.resolve ('src') funciona

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

Talvez tente adicionar no webpack. mix.webpackConfig referencia o laravel mix .

mix.webpackConfig({

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

E então no uso vue.

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