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.js
Datei:
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 .vue
am Ende des Importpfades (die Sie normalerweise benötigen).
Danke für die Hilfe!
quelle
Antworten:
Dies erfolgt mit der Webpack-
resolve.alias
Konfigurationsoption und ist nicht spezifisch für Vue.In der Vue Webpack-Vorlage ist Webpack so konfiguriert, dass es
@/
durch den folgendensrc
Pfad ersetzt wird :Der Alias wird verwendet als:
quelle
vue-cli
v3 + verwenden, sollten Sie den Ordner~@
referenzierensrc
. ZB:$font-path: '~@/assets/fonts/';
Denken Sie auch daran, dass Sie auch in tsconfig Variablen erstellen können:
Dies kann für Namenskonventionszwecke verwendet werden:
quelle
tsc
ist das nicht und deshalb brauchst du so etwas wiemodule-alias
odertsconfig-paths
.Ich komme mit folgender Kombination vorbei
IDE beendet die Warnung der URL, hört jedoch beim Kompilieren in "build \ webpack.base.conf.js" zu einer ungültigen URL auf.
Bingoo!
quelle
Auflösung ('src') funktioniert bei mir nicht, aber path.resolve ('src') funktioniert
quelle
Versuchen Sie vielleicht, ein Webpack hinzuzufügen. mix.webpackConfig verweist auf Laravel Mix .
Und dann im Einsatz.
quelle