Eine kurze Analyse, wo sich die von vue zusammengestellte statische Seite befindet

Vue ist ein beliebtes JavaScript-Framework, mit dem wir interaktive Webanwendungen einfacher erstellen können. Einer der Vorteile von Vue besteht darin, dass es ein virtuelles DOM zur Verwaltung verschiedener Komponenten der Webseite verwendet, was die Aktualisierung von Daten und Ansichten auf Komponentenebene effizienter macht.

Wenn wir jedoch Vue zum Schreiben von Webanwendungen verwenden, werden wir auf ein Problem stoßen: Während des Entwicklungsprozesses liegen die von uns geschriebenen Vue-Komponenten normalerweise in Form von .vue-Dateien vor, und diese Dateien können nicht direkt für die Produktion verwendet werden. In einer Produktionsumgebung müssen wir diese Komponenten in statische HTML-, CSS- und JavaScript-Dateien kompilieren, bevor wir sie auf einem Webserver bereitstellen. Die Frage ist also: Wo werden diese kompilierten statischen Dateien abgelegt?

Die Antwort ist einfach: Wenn wir Vue in der Produktion verwenden, müssen wir die Vue-CLI verwenden, um unsere Anwendung zu erstellen, die unsere Vue-Komponenten automatisch in statische HTML-, CSS- und JavaScript-Dateien kompiliert und sie in die Datei ./dist einfügt Verzeichnis. Dieses Verzeichnis wird automatisch von der Vue-CLI generiert und enthält alle statischen Ressourcen unserer Anwendung.

Im Verzeichnis ./dist sehen wir eine Dateistruktur ähnlich der folgenden:

dist/
├── css/
│   ├── app.1a2b3c4d.css
│   └── chunk-vendors.5e6f7g8h.css
├── js/
│   ├── app.1a2b3c4d.js
│   ├── app.1a2b3c4d.js.map
│   ├── chunk-vendors.5e6f7g8h.js
│   └── chunk-vendors.5e6f7g8h.js.map
└── index.html

In dieser Dateistruktur sehen wir eine index.html-Datei, die unsere Eingabedatei und auch der Browser ist. Der Ausgangspunkt für Zugriff auf unsere App. Wir können auch ein CSS-Verzeichnis und ein JS-Verzeichnis sehen, die jeweils die von der Anwendung benötigten CSS- und JavaScript-Dateien enthalten. Darunter ist eine Zeichenfolge im Dateinamen ein Hash-Wert des Quellcodes, um das Zwischenspeichern und Aktualisieren zu erleichtern.

Wir können alle Dateien im Verzeichnis ./dist auf dem Webserver bereitstellen und dann über den Browser auf unsere Anwendung zugreifen. Wenn wir manuelle Vorgänge bei der Verwendung von Vue reduzieren möchten, können wir auch automatisierte Bereitstellungstools wie Jenkins verwenden, um unsere Anwendungen automatisch zu erstellen und bereitzustellen.

Zusammenfassend lässt sich sagen, dass Komponenten in Vue über die Vue-CLI in einer Produktionsumgebung kompiliert werden müssen und die kompilierten Dateien im Verzeichnis ./dist gespeichert werden. Wir können die statischen Dateien im Verzeichnis ./dist auf dem Webserver bereitstellen und über den Browser auf unsere Anwendung zugreifen.

Das obige ist der detaillierte Inhalt vonEine kurze Analyse, wo sich die von vue zusammengestellte statische Seite befindet. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!