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.js
arquivo:
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 .vue
no final do caminho de importação (que normalmente você precisa).
Obrigado pela ajuda!
fonte
Respostas:
Isso é feito com a
resolve.alias
opção de configuração do Webpack e não é específico do Vue.No modelo Vue Webpack , o Webpack está configurado para substituir
@/
pelosrc
caminho :O alias é usado como:
fonte
vue-cli
v3 +, você deve usar~@
para fazer referência àsrc
pasta. Por exemplo:$font-path: '~@/assets/fonts/';
Lembre-se também de que você pode criar variáveis no tsconfig:
Isso pode ser utilizado para fins de convenção de nomenclatura:
fonte
tsc
is does e, portanto, você precisará de algo comomodule-alias
outsconfig-paths
.Eu acabo com a seguinte combinação
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"
Bingoo!
fonte
resolve ('src') não funciona para mim, mas path.resolve ('src') funciona
fonte
Talvez tente adicionar no webpack. mix.webpackConfig referencia o laravel mix .
E então no uso vue.
fonte