So optimieren Sie vue+resolve

Dieses Mal zeige ich Ihnen, wie Sie Vue+Resolve optimieren, welche Vorsichtsmaßnahmen es für die Vue+Resolve-Optimierung gibt, das Folgende ist ein praktischer Fall, schauen wir uns das an.

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.

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 kann die Anwendung bequemer sein, wenn wir die Komponente über die Route in der Komponente anwenden, z. B.:

import Hello from '@components/Hello';

Das heißt, wir müssen das Suffix .vue nicht zur Referenz der Komponente Hello.vue hinzufügen. Wenn wir keine Erweiterungen verwenden, müssen wir @components/Hello.vue verwenden, um dies einzuführen Datei.

2. discover.alias

Wenn Komponenten aufeinander verweisen, kann das 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 diese Konfiguration ü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"),
  }

Unter diesen bedeutet vue$ die Einführung von vue, was wie folgt geschrieben werden kann:

import Vue from 'vue'

Darüber hinaus können wir @pages und @components direkt zitieren, wodurch viele komplexe Anwendungen vermieden werden. Darüber hinaus kann @ Mehrdeutigkeiten beseitigen. Wie unten gezeigt:

import Hello from '@components/Hello';

import App from '@pages/App'

Es ist erwähnenswert: In webpack.config.js können wir nicht die Pfadmethoden von ../ und ./ verwenden. Stattdessen verwenden wir path.join und dirname, um den Pfad darzustellen, andernfalls wird ein Fehler gemeldet.

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

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Das obige ist der detaillierte Inhalt vonSo optimieren Sie vue+resolve. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!