Je commence un nouveau projet vue.js donc j'ai utilisé l'outil vue-cli pour échafauder un nouveau projet webpack (ie vue init webpack
).
En parcourant les fichiers générés, j'ai remarqué les importations suivantes dans le src/router/index.js
fichier:
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
}
]
})
Je n'ai jamais vu le signe at ( @
) dans un chemin auparavant. Je soupçonne que cela permet des chemins relatifs (peut-être?) Mais je voulais être sûr de comprendre ce qu'il fait vraiment.
J'ai essayé de chercher autour en ligne mais je n'ai pas pu trouver d'explication (problème parce que la recherche de "au signe" ou l'utilisation du caractère littéral @
n'aide pas comme critère de recherche).
Que fait @
ce chemin (un lien vers la documentation serait fantastique) et est-ce une chose es6? Une chose webpack? Une chose vue-loader?
METTRE À JOUR
Merci Felix Kling de m'avoir indiqué une autre question / réponse en double stackoverflow sur cette même question.
Bien que le commentaire sur l'autre post de stackoverflow ne soit pas la réponse exacte à cette question (ce n'était pas un plugin babel dans mon cas), il m'a indiqué la bonne direction pour trouver ce que c'était.
Dans l'échafaudage que vue-cli lance pour vous, une partie de la configuration de base du webpack configure un alias pour les fichiers .vue:
Cela a du sens à la fois dans le fait qu'il vous donne un chemin relatif à partir du fichier src et qu'il supprime l'exigence de .vue
la fin du chemin d'importation (dont vous avez normalement besoin).
Merci pour l'aide!
la source
Réponses:
Cela se fait avec l'
resolve.alias
option de configuration Webpack et n'est pas spécifique à Vue.Dans le modèle Vue Webpack , Webpack est configuré pour remplacer
@/
parsrc
chemin :L'alias est utilisé comme:
la source
vue-cli
v3 +, vous devez utiliser~@
pour référencer lesrc
dossier. Par exemple:$font-path: '~@/assets/fonts/';
Gardez également à l'esprit que vous pouvez également créer des variables dans tsconfig:
Cela peut être utilisé à des fins de convention de dénomination:
la source
tsc
n'est pas le cas et vous aurez donc besoin de quelque chose commemodule-alias
outsconfig-paths
.Je surmonte la combinaison suivante
IDE arrêtera d'avertir l'uri, mais cela provoquera un uri invalide lors de la compilation, dans "build \ webpack.base.conf.js"
Bingoo!
la source
resolve ('src') ne fonctionne pas pour moi mais path.resolve ('src') fonctionne
la source
Essayez peut-être d'ajouter dans le webpack. mix.webpackConfig fait référence à laravel mix .
Et puis en vue utilisation.
la source