web-dev-qa-db-fra.com

Importation ES6 à l'aide du chemin de connexion ('@') dans un projet vue.js à l'aide de Webpack

Je commence un nouveau projet vue.js et j’ai donc utilisé l’outil vue-cli pour échafauder un nouveau projet Webpack (c.-à-d. vue init webpack).

En parcourant les fichiers générés, j'ai remarqué les importations suivantes dans le fichier 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
        }
    ]
})

Je n'ai jamais vu l'arobase (@) dans un chemin auparavant. Je suppose que cela permet des chemins relatifs (peut-être?), Mais je voulais être sûr de bien comprendre ce qu’il fait.

J'ai essayé de chercher en ligne mais je n'ai pas pu trouver d'explication (sans doute parce que chercher "à signe" ou utiliser le caractère littéral @ n'aide pas en tant que critère de recherche).

Que fait le @ dans ce chemin (un lien vers la documentation serait fantastique) et s’agit-il d’une chose es6? Un truc webpack? Une chose vue-loader?

MISE À JOUR

Merci à Felix Kling de m'avoir signalé une autre question/réponse dupliquée sur cette même question.

Bien que le commentaire sur l'autre publication 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 vous lance, une partie de la configuration de base du webpack configure un alias pour les fichiers .vue:

Alias location within project

Cela a du sens à la fois qu’il vous donne un chemin relatif à partir du fichier src et que supprime l’exigence du .vue à la fin du chemin d'importation (dont vous avez normalement besoin).

Merci pour l'aide!

javascriptwebpackecmascript-6vue.js
186
Chris Schmitz

Ceci est fait avec Webpack resolve.alias option de configuration et n'est pas spécifique à Vue.

Dans Vue modèle Webpack , Webpack est configuré pour remplacer _@/_ par src chemin :

_  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      ...
      '@': resolve('src'),
    }
  },
  ...
_
170
Estus Flask

Notez également que vous pouvez également créer des variables dans tsconfig:

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

Ceci peut être utilisé à des fins de convention de dénomination:

import { componentHeader } from '@components/header';
2
Tyler Canton

Je finis avec la combinaison suivante

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

L'EDI cessera d'avertir l'URI, mais cela entraîne l'URI non valide lors de la compilation, dans "build\webpack.base.conf.js"

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

Bingoo!

0
Luân Trương