Ich beginne ein neues vue.js-Projekt, also habe ich das vue-cli-Tool verwendet, um ein neues Webpack-Projekt (dh vue init webpack) zu erstellen .

Als ich durch die generierten Dateien ging, bemerkte ich die folgenden Importe in der src/router/index.jsDatei:

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

Ich habe das at-Zeichen ( @) noch nie in einem Pfad gesehen. Ich vermute, dass es relative Pfade zulässt (vielleicht?), Aber ich wollte sichergehen, dass ich verstehe, was es wirklich tut.

Ich habe versucht, online zu suchen, konnte aber keine Erklärung finden (wahrscheinlich, weil die Suche nach "at sign" oder die Verwendung des Literalzeichens @nicht als Suchkriterium hilft).

Was macht das @auf diesem Weg (Link zur Dokumentation wäre fantastisch) und ist das eine es6-Sache? Eine Webpack-Sache? Eine Vue-Loader-Sache?

AKTUALISIEREN

Vielen Dank an Felix Kling, der mich auf eine andere doppelte Frage / Antwort zum Stapelüberlauf zu derselben Frage hingewiesen hat.

Obwohl der Kommentar zum anderen Stackoverflow-Beitrag nicht die genaue Antwort auf diese Frage ist (in meinem Fall war es kein Babel-Plugin), hat er mich in die richtige Richtung gelenkt, um herauszufinden, was es war.

In dem Gerüst, das vue-cli für Sie bereitstellt, richtet ein Teil der Basis-Webpack-Konfiguration einen Alias ​​für .vue-Dateien ein:

Dies macht Sinn , sowohl in der Tatsache , dass es Ihnen einen relativen Pfad von der src - Datei gibt und es beseitigt die Notwendigkeit der .vueam Ende des Importpfades (die Sie normalerweise benötigen).

Danke für die Hilfe!

Dies erfolgt mit der Webpack- resolve.aliasKonfigurationsoption und ist nicht spezifisch für Vue.

In der Vue Webpack-Vorlage ist Webpack so konfiguriert, dass es @/durch den folgenden srcPfad ersetzt wird :

  const path = require('path');

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

Der Alias ​​wird verwendet als:

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

Denken Sie auch daran, dass Sie auch in tsconfig Variablen erstellen können:

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

Dies kann für Namenskonventionszwecke verwendet werden:

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

Ich komme mit folgender Kombination vorbei

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

IDE beendet die Warnung der URL, hört jedoch beim Kompilieren in "build \ webpack.base.conf.js" zu einer ungültigen URL auf.

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

Bingoo!

Auflösung ('src') funktioniert bei mir nicht, aber path.resolve ('src') funktioniert

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

Versuchen Sie vielleicht, ein Webpack hinzuzufügen. mix.webpackConfig verweist auf Laravel Mix .

mix.webpackConfig({

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

Und dann im Einsatz.

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