Detaillierte Erläuterung der Auflösung bei der Vue-Pfadoptimierung

Beim Erstellen eines Vue+Webpack-Projekts über vue-cli sind viele davon bereits konfiguriert, aber der Pfad kann optimiert werden, um die Entwicklung zu erleichtern. In diesem Artikel wird hauptsächlich die Lösung der Vue-Pfadoptimierung vorgestellt. Der Herausgeber findet sie recht gut. Jetzt werde ich sie mit Ihnen teilen und Ihnen eine Referenz geben. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

1. discover.extensions

In webpack.base.conf.js können wir die Auflösungskonfiguration sehen, in der die Erweiterungen ein Array sind, wie unten gezeigt:

extensions: ['.js', '.vue', '.json'],

Durch diese Konfiguration können wir Komponenten in Komponenten bequemer anwenden, wenn wir sie über Routen anwenden, z. B.:

import Hello from '@components/Hello';

Das heißt, wir können auf die Hello.vue-Komponente verweisen, ohne das Suffix .vue hinzuzufügen. Wenn wir keine Erweiterungen verwenden, müssen wir @components/Hello.vue verwenden, um diese Komponente einzuführen.

2. discover.alias

Bei der gegenseitigen Referenzierung zwischen Komponenten kann es so aussehen:

import Hello from '../src.components/Hello';

Der Pfad ist relativ zur aktuellen Seite. Wenn die Verschachtelung jedoch komplexer ist, ist das Schreiben schwieriger. Aber wenn wir eine Konfiguration wie diese übergeben:

 resolve: {
  extensions: ['.js', '.vue', '.json'],
  alias: {
   'vue$': 'vue/dist/vue.esm.js',
   '@pages': path.join(__dirname, "..", "src", "pages"),
   "@components": path.join(__dirname, "..", "src", "components"),
   // 注意： 静态资源通过src，不能这么设置。
   // "@assets": path.join(__dirname, "..", "src", "assets"),
  }

wobei vue$ die Einführung von vue bedeutet, können wir es so schreiben:

import Vue from 'vue'

Darüber hinaus können wir @pages und @components direkt zitieren, wodurch viele komplizierte Anwendungen entfallen, und @ kann Unklarheiten beseitigen. Wie unten gezeigt:

import Hello from '@components/Hello';

import App from '@pages/App'

Bemerkenswert: In webpack.config.js können wir ./ und nicht verwenden. / in Form von Pfadmethoden, aber in Form von path.join und __dirname zur Darstellung des Pfades, andernfalls wird ein Fehler gemeldet.

Außerdem: In der Komponente verweisen wir auf einige statische Dateien, d. h. Dateien unter statischen. Zu diesem Zeitpunkt können wir die Konfiguration nicht unter Alias ​​verwenden, sondern müssen die allgemeine Konfigurationsmethode verwenden.

Verwandte Empfehlungen:

MySql verwendet Skip-Name-Resolve, um das Problem der langsamen externen Netzwerkverbindung des Clients zu lösen

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Auflösung bei der Vue-Pfadoptimierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!