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.jsfichier:

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 .vuela fin du chemin d'importation (dont vous avez normalement besoin).

Merci pour l'aide!

Cela se fait avec l' resolve.aliasoption de configuration Webpack et n'est pas spécifique à Vue.

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

  const path = require('path');

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

L'alias est utilisé comme:

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

Gardez également à l'esprit que vous pouvez également créer des variables dans tsconfig:

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

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

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

Je surmonte la combinaison suivante

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

IDE arrêtera d'avertir l'uri, mais cela provoquera un uri invalide lors de la compilation, dans "build \ webpack.base.conf.js"

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

Bingoo!

resolve ('src') ne fonctionne pas pour moi mais path.resolve ('src') fonctionne

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

Essayez peut-être d'ajouter dans le webpack. mix.webpackConfig fait référence à laravel mix .

mix.webpackConfig({

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

Et puis en vue utilisation.

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