Analyse des Problems der Bereitstellung eines Vue-Projekts und der Konfiguration eines Proxys in Nginx

1. Installieren und starten Sie nginx

# Installieren Sie nginx
sudo apt-get installiere nginx
# Starten Sie sudo service nginx start

Installation überprüfen

# Nachdem die Installation abgeschlossen ist, überprüfen Sie sie mit nginx -v. Wenn die Ausgabe der Nginx-Versionsinformationen anzeigt, dass die Installation erfolgreich war, nginx -v
# Wenn die Ausgabe dieser Versionsnummer ähnelt, ist die Installation abgeschlossen. Nginx-Version: nginx/1.14.0 (Ubuntu)

2. Ändern Sie die Nginx-Konfigurationsdatei und stellen Sie das Projekt bereit

Überprüfen Sie die Konfiguration von nginx. Die Konfigurationsdateien unter Linux-Systemen werden normalerweise im nginx-Verzeichnis unter dem Verzeichnis /etc gespeichert.
Die nginx-Konfigurationsdatei befindet sich im Ordner /etc/nginx. Öffnen Sie die Datei /etc/nginx/sites-available/default
(nginx kann mehrere Konfigurationsdateien haben und wir konfigurieren nginx normalerweise, indem wir diese Datei ändern)

Verwenden Sie zum Öffnen den mit dem Verbindungstool gelieferten Editor oder vim
Ändern Sie die folgenden beiden Stellen, um das Projekt erfolgreich bereitzustellen

Überprüfen Sie, ob die Nginx-Konfiguration korrekt ist

sudo nginx -t

Es wird „Erfolgreich“ angezeigt.

nginx: Test der Konfigurationsdatei /etc/nginx/nginx.conf ist erfolgreich

Nginx-Konfiguration laden

sudo nginx -s neu laden

Wenn das Projekt mit einer domänenübergreifenden API konfiguriert ist, lesen Sie bitte weiter mit Punkt 3, andernfalls gehen Sie einfach zu Punkt 4, um auf das Projekt zuzugreifen

3. Konfigurieren Sie die Proxy-API

Generell müssen Projekte mit getrenntem Front-End und Back-End domänenübergreifend sein

Oder bearbeiten Sie die Datei /etc/nginx/sites-available/default

#Der Anforderungsadresse im Vue-Projekt muss eine API vorangestellt werden
#Proxy-Konfiguration zum Initiieren von Anfragen, alle Adressen, die /api enthalten, werden ersetzt und an die Adresse unter dem Proxy-Pass-Speicherort /api/ { weitergeleitet.
 		schreibe ^/b/(.*)$ /$1 um, break;
 		Proxy-Passwort http://www.ifyyf.com/; 	
	}

Wie gezeigt

Sie können auf den ursprünglichen Cross-Domain-Proxy von vue.config.js zugreifen.

4. Zugriff auf das Projekt

Öffnen Sie die IP-Adresse oder den Domänennamen des Servers, um auf das Projekt zuzugreifen

5. Sekundäres Menü 404 Problem

vim öffnet die Standarddatei

try_dateien $uri $uri/ =404;

Geändert zu

try_ Dateien $uri $uri/ /index.html;

Dies ist das Ende dieses Artikels über die Bereitstellung von Vue-Projekten und die Konfiguration von Proxys auf Nginx. Weitere Informationen zur Bereitstellung von Vue-Projekten auf Nginx finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!