So stellen Sie ein Vue-Projekt unter Nginx bereit

Heute werde ich den Server nginx verwenden und muss auch mein Vue-Projekt auf dem Server bereitstellen, also werde ich es aufschreiben.

Gehen Sie zunächst zur offiziellen Nginx-Website, um Nginx herunterzuladen:

Download-Adresse: https://nginx.org/en/download.html

Die heruntergeladene Datei ist ein entpacktes Paket. Entpacken Sie es in den Ordner, in dem Sie es ablegen möchten.

Führen Sie nginx.exe aus, öffnen Sie dann den Browser und geben Sie localhost ein. Wenn das folgende Bild angezeigt wird, bedeutet dies Erfolg:

Wenn es nicht funktioniert, keine Panik, es kann sein, dass Ihr Port durch andere Inhalte belegt ist. Dann können Sie Ihr nginx-Verzeichnis öffnen und conf finden

Klicken Sie hinein und suchen Sie eine nginx.conf-Datei

Öffnen Sie es dann mit einem Editor und suchen Sie den Server-Listener, also Ihre Portnummer. Der Standard ist Port 80. Sie können ihn entsprechend Ihrem eigenen freien Port neu schreiben. Speichern Sie ihn nach dem Neuschreiben und öffnen Sie Ihren lokalen Host: Die von Ihnen neu geschriebene Portnummer ist in Ordnung.

 Server {
      hören Sie 8088;
      Servername localhost;

      #Zeichensatz koi8-r;

      #access_log Protokolle/Host.access.log Haupt;

      Standort / {
        Stamm-HTML;
        Index Index.html Index.htm;
    } 

Oben ist die Methode zum Installieren und Konfigurieren des Nginx-Servers beschrieben. Im Folgenden finden Sie die Schritte zum Bereitstellen Ihres eigenen Vue-Projekts auf dem von Ihnen installierten und konfigurierten Nginx-Server:

Suchen Sie zunächst Ihr eigenes Vue-Projekt und geben Sie den Befehl npm run build ein. Dadurch wird in Ihrem Vue-Verzeichnis ein Dist-Ordner generiert, der Ihr Vue-Projekt enthält.

Öffnen Sie dann den Ordner „dist“ und kopieren Sie den Inhalt. Darin befinden sich zwei Dateien: eine ist „index.html“, das ist das Hauptverzeichnis, die andere ist der statische Ordner.

Kopieren Sie sie und öffnen Sie die HTML-Datei in Ihrem Nginx-Verzeichnis. Es gibt zwei Standarddateien. Löschen Sie sie direkt und fügen Sie die gerade kopierten Dateien dort ein.

Öffnen Sie dann den Browser und geben Sie die Portnummer ein, die Sie am Anfang geändert haben: localhost: die von Ihnen geänderte Portnummer, drücken Sie die Eingabetaste; Sie sehen nun, wie Ihr Vue-Projekt ausgeführt wird. Meines sieht so aus:

Das ist es. ~ ~~~~

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.