Was ist falsch am Vue-Scaffolding-Erstellungsprojekt ohne statische Dateien?

Mit der kontinuierlichen Weiterentwicklung der Front-End-Technologie werden immer mehr Front-End-Frameworks in unsere tägliche Entwicklung eingeführt. Unter diesen Frameworks wird Vue.js von Entwicklern als schnelles und leichtes Front-End-Framework zunehmend bevorzugt. Während der Entwicklung von Vue.js verwenden wir normalerweise Vue CLI, das offizielle Gerüst, um Projekte zu erstellen. Wenn wir jedoch Vue CLI zum Erstellen eines Projekts verwenden, stellen wir in einigen Fällen fest, dass der statische Ordner nicht generiert wird, was für unerfahrene Entwickler verwirrend sein kann. In diesem Artikel erfahren Sie, wie Sie dieses häufig auftretende Problem lösen können.

Lasst uns zunächst verstehen, warum das passiert. Wenn wir über Vue CLI ein neues Projekt erstellen, initialisiert Vue CLI einige Standardkonfigurationen und -strukturen als Basisdateien des Projekts. Diese Dateien sind in einem Ordner namens src im Stammverzeichnis des Projekts enthalten. Standardmäßig generiert Vue CLI keinen Ordner mit statischen Dateien für uns. Wenn wir also versuchen, auf statische Ordnerressourcen wie CSS- oder JavaScript-Dateien zuzugreifen, sehen wir normalerweise eine 404-Fehlerseite.

Wie füge ich also statische Ordner zu Projekten hinzu, die mit Vue CLI erstellt wurden? Im Folgenden werden zwei verschiedene Methoden vorgestellt:

Methode 1: Manuell einen statischen Ordner erstellen

Zuerst müssen wir manuell einen Ordner mit dem Namen „static“ im Stammverzeichnis des Projekts erstellen. Dieser Ordner wird zum Speichern statischer Ressourcendateien verwendet. Sie können unter dem statischen Ordner einige Unterordner erstellen, um verschiedene Arten statischer Ressourcen zu speichern. Beispielsweise können wir einen CSS-Ordner erstellen und alle CSS-Dateien darin speichern; wir können auch einen Bilderordner erstellen, um alle Bildressourcen zu speichern.

Um Vue CLI mitzuteilen, dass wir den statischen Ordner erstellt haben, müssen wir eine Datei namens vue.config.js im Stammverzeichnis finden und öffnen. Wenn Sie die Datei nicht haben, müssen Sie sie manuell erstellen. Fügen Sie den folgenden Code zur Datei vue.config.js hinzu:

module.exports = {
  chainWebpack: config => {
    config
      .plugin('copy')
      .tap(args => {
        args[0][0].from = 'static'
        return args
      })
  }
}

Dieser Code weist Vue CLI an, beim Erstellen des Projekts den gesamten Inhalt des statischen Ordners in das Stammverzeichnis des Projekts zu kopieren. Jetzt können Sie Ihre statischen Ressourcendateien im statischen Ordner ablegen und sie normal in Ihrem Vue.js-Projekt verwenden.

Methode 2: Öffentlichen Ordner verwenden

Vue CLI bietet auch eine weitere Möglichkeit, dem Projekt statische Dateien hinzuzufügen. Auf diese Weise werden statische Dateien im öffentlichen Ordner gespeichert. Der öffentliche Ordner unterscheidet sich vom src-Ordner und wird nicht kompiliert und in das endgültige Projekt gepackt. Stattdessen werden sie in das Stammverzeichnis des endgültig erstellten Projekts kopiert.

Um diese Methode zu verwenden, müssen wir nur die statischen Ressourcendateien in den öffentlichen Ordner legen und sie wie folgt in unseren HTML-Dateien verwenden:

<link rel="stylesheet" href="<%= BASE_URL %>css/reset.css">

Es ist zu beachten, dass wir in Vue CLI 3 die statischen Dateien in speichern den öffentlichen Ordner, und wir müssen keine Konfiguration in der Datei vue.config.js vornehmen.

Zusammenfassung

Während des Entwicklungsprozesses von Vue.js verwenden wir normalerweise Vue CLI, das offizielle Gerüst, um Projekte zu erstellen. Nachdem wir das Projekt mit Vue CLI erstellt haben und feststellen, dass der statische Ordner nicht generiert wird, können wir statische Dateien hinzufügen, indem wir manuell einen statischen Ordner erstellen oder einen öffentlichen Ordner verwenden. Wenn Sie ein unerfahrener Entwickler sind, der Vue.js lernt, kann dieser Artikel meiner Meinung nach hilfreich für Sie sein.

Das obige ist der detaillierte Inhalt vonWas ist falsch am Vue-Scaffolding-Erstellungsprojekt ohne statische Dateien?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!