Aufzeichnung des tatsächlichen Prozesses der Verpackung und Bereitstellung des Vue-Projekts

Vorwort

Wenn Sie Vue verwenden, um Front-End- und Back-End-Projekte zu trennen, wird das Front-End normalerweise separat bereitgestellt, und Benutzer greifen auch auf die Front-End-Projektadresse zu. Daher ist es für Front-End-Entwickler sehr wichtig, mit dem Projektbereitstellungsprozess und den Lösungen für verschiedene Probleme vertraut zu sein. Das Verpacken und Bereitstellen des Vue-Projekts selbst ist nicht kompliziert, aber einige Front-End-Studenten haben möglicherweise nicht viel Kontakt mit Servern und stoßen während des Bereitstellungsprozesses möglicherweise dennoch auf verschiedene Probleme. In diesem Artikel wird die Methode zur Verwendung des Nginx-Servers zum Proxy-Front-End-Projekt und die damit verbundenen Probleme bei der Projektbereitstellung vorgestellt. Inhaltsübersicht:

1. Vorbereitung - Server- und Nginx-Nutzung

1. Bereiten Sie einen Server vor

Ich verwende das Ubuntu-System und die Vorgänge beim Linux-System sind ähnlich. Was ist, wenn kein Server vorhanden ist?

Wenn Sie es einfach nur ausprobieren möchten, können Sie die kostenlosen Testpakete von Cloud-Servern großer Hersteller ausprobieren, beispielsweise die kostenlose Testversion von Huawei Cloud. Die relevanten Vorgänge in diesem Artikel werden auf Huawei Cloud ausgeführt. Wenn Sie jedoch häufig üben möchten, können Sie meiner Meinung nach einen Cloud-Server kaufen, beispielsweise die oben erwähnte Huawei Cloud oder Alibaba Cloud, die recht zuverlässig sind. Meine persönliche Website wird auf Alibaba Cloud bereitgestellt. Sie können auf meinen Werbelink klicken, um einen Kauf zu tätigen. Vor kurzem gab es eine Veranstaltung, bei der der erste Kauf weniger als 100 Yuan/Jahr betrug.

2. Installieren und starten Sie nginx

Um nicht zu viel mitzunehmen, werde ich hier nicht zu sehr ins Detail gehen (es gibt schließlich viele entsprechende Tutorials online). Normalerweise werden nur die folgenden beiden Befehle benötigt:

# Installieren. Nachdem die Installation abgeschlossen ist, überprüfen Sie sie mit nginx -v. Wenn die Ausgabe der Nginx-Versionsinformationen anzeigt, dass die Installation erfolgreich war, führen Sie sudo apt-get install nginx aus.
# Starten Sie sudo service nginx start

Nach dem Start sollten Sie unter normalen Umständen die Standardseite des Nginx-Servers sehen können, indem Sie direkt auf http://Server-IP oder http://Domänenname zugreifen (der in diesem Artikel verwendete Server ist nicht mit einem Domänennamen konfiguriert, daher wird die IP verwendet. Was diesen Artikel betrifft, gibt es keinen großen Unterschied zwischen dem Domänennamen und der IP). Wenn Sie nicht darauf zugreifen können, liegt dies möglicherweise daran, dass der Standard-HTTP-Dienstport (Port 80) Ihres Cloud-Servers nicht für die Außenwelt geöffnet ist. Konfigurieren Sie ihn einfach in der Serversicherheitsgruppe.

3. Nginx verstehen: Ändern Sie die Nginx-Konfiguration, damit der Nginx-Server die von uns erstellten Dateien als Proxy verwendet.

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

Sie können sehen, dass das Stammverzeichnis des Nginx-Proxys standardmäßig /var/www/html ist. Wenn Sie http://Server-IP eingeben, werden die Dateien in diesem Ordner aufgerufen. Die Standardzugriffsdateien werden gemäß dem Konfigurationswert des Index gefunden, z. B. index.html, index.htm usw.

Wir können den Root-Wert ändern, um den Ordner zu ändern, in dem sich der Nginx-Dienstproxy befindet:

Erstellen Sie einen Ordner /www, erstellen Sie index.html und schreiben Sie die Zeichenfolge „Hallo Welt“.

mkdir /www
echo 'Hallo Welt' > /www/index.html

Ändern Sie den Root-Wert in /www

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

Nginx-Konfiguration laden: sudo nginx -s reload

Besuchen Sie die Seite erneut und sehen Sie, dass der Seiteninhalt nun die von uns erstellte index.html ist:

2. Vue-Projektverpackung und Synchronisierungsdateien mit dem Remote-Server

1. Verpackung

Standardmäßig sollte für mit vue-cli erstellte Projekte das Skript in package.json mit Build-Anweisungen konfiguriert sein und Sie können yarn build oder npm run build direkt ausführen.

2. Mit Remote-Server synchronisieren

Wir verwenden nginx, um das Vue-Projekt bereitzustellen, das im Wesentlichen den gepackten Inhalt des Vue-Projekts mit dem Ordner synchronisiert, auf den nginx verweist. In den vorherigen Schritten wurde bereits erläutert, wie nginx so konfiguriert wird, dass es auf den von uns erstellten Ordner verweist. Die verbleibende Frage ist, wie die gepackten Dateien mit dem angegebenen Ordner auf dem Server synchronisiert werden, z. B. mit dem im vorherigen Schritt erstellten Ordner /www. Zum Synchronisieren von Dateien können Sie den scp-Befehl in git-bash oder Powershell verwenden. Wenn Sie in einer Linux-Umgebung entwickeln, können Sie auch den rsync-Befehl verwenden:

scp -r dist/* [email protected]:/www
oder rsync -avr --delete-after dist/* [email protected]:/www

Beachten Sie, dass hier und in den folgenden Schritten root für die Remote-Synchronisierung verwendet wird. Sie sollten root und ip entsprechend Ihrer spezifischen Situation ersetzen (ip wird durch Ihre eigene Server-IP ersetzt).

Der Einfachheit halber können Sie im Skript package.json einen Push-Befehl hinzufügen, wobei Sie yarn als Beispiel nehmen (wenn Sie npm verwenden, ändern Sie yarn im Push-Befehl einfach in npm run):

 "Skripte": {
    "Build": "Vue-CLI-Service-Build",
    "push": "Garnaufbau und scp -r dist/* [email protected]:/www"
  },

Auf diese Weise können Sie yarn push oder npm run push direkt ausführen, um direkt zu veröffentlichen. Es gibt jedoch noch ein kleines Problem: Wenn der Befehl ausgeführt wird, müssen Sie das Root-Passwort des Remote-Servers eingeben (root wird hier zum Herstellen einer Verbindung mit der Remote verwendet, Sie können andere Benutzer verwenden, schließlich verfügt der Root-Benutzer über zu hohe Berechtigungen).

Um zu vermeiden, dass wir bei jeder Ausführung des Befehls das Root-Passwort eingeben müssen, können wir das lokale SSH mit der Datei authorized_keys des Remote-Servers synchronisieren.

3. SSH-Schlüssel synchronisieren

SSH-Schlüssel generieren: Verwenden Sie Git Bash oder Powershell, um „ssh-keygen“ auszuführen und den SSH-Schlüssel zu generieren. Du wirst nach der Speicheradresse des generierten Schlüssels gefragt. Drücke dazu einfach die Eingabetaste. Wenn dieser bereits existiert, wirst du gefragt, ob du ihn überschreiben möchtest:

Synchronisieren Sie den SSH-Schlüssel mit dem Remote-Server. Verwenden Sie zum Synchronisieren den Befehl ssh-copy-id

ssh-copy-id -i ~/.ssh/id_rsa.pub [email protected] 

Nach Eingabe des Passworts müssen Sie das Passwort beim Synchronisieren nicht erneut eingeben. Tatsächlich wird ssh_key mit der Datei ~/.ssh/authorized_keys des Servers synchronisiert (hier ist das Home-Verzeichnis des Root-Benutzers):

Natürlich können Sie auch den Inhalt der lokalen Datei ~/.ssh/id_rsa.pub (beachten Sie, dass es sich um einen öffentlichen Schlüssel handelt, der mit „pub“ endet) manuell kopieren und an die Serverdatei ~/.ssh/authorized_keys anhängen (am Namen können Sie erkennen, dass diese Datei mehrere SSH-Schlüssel speichern kann).

Hinweis: Während des gesamten Vorgangs wird der Root-Benutzer verwendet, es gibt daher kein Problem mit der Berechtigung für Dateivorgänge. Wenn der Benutzer, der Ihren Ordner erstellt hat, kein Remote-Login-Benutzer ist, liegt möglicherweise ein Problem mit einem Fehler bei der Dateisynchronisierung vor. In diesem Fall muss der Remote-Server die Lese- und Schreibberechtigungen des Ordners ändern (Befehl chmod).

Ich habe ein Testprojekt erstellt (klicken Sie auf diesen Link, um es auf GitHub anzuzeigen) [1] und es ausprobiert. Das Verpacken und Hochladen der Dateien kann mit nur einem Befehl erfolgen:

Nach dem Besuch sehen wir die vertraute Benutzeroberfläche:

Bisher wurde die Einführung in die Veröffentlichung von Vue-Projekten unter normalen Umständen abgeschlossen. Als Nächstes stellen wir die Veröffentlichungsmethode unter Nicht-Domänen-Stammpfad und Verlaufsroutingmodus vor.

3. Freigabe des Nicht-Domänen-Stammpfads

Manchmal können auf demselben Server und demselben Port mehrere verschiedene Projekte vorhanden sein, die nach Verzeichnissen aufgeteilt sind. Wir möchten das Projekt beispielsweise unter http://a.com/test bereitstellen, sodass beim Besuch von http://a.com/test auf die Homepage des Projekts zugegriffen wird, während die Adresse ohne das Präfix „Test“ auf andere Projekte zugreift. Zu diesem Zeitpunkt müssen Sie die Nginx-Konfiguration und die Vue-Verpackungskonfiguration ändern.

1. Nginx-Konfiguration

Sie müssen lediglich eine Standortregel hinzufügen, den Zugriffspfad zuweisen und den Zugriffsordner angeben. Wir können /test auf den Ordner /www verweisen, den wir zuvor erstellt haben. Da Ordnername und Zugriffspfad inkonsistent sind, müssen wir die Aliaskonfiguration verwenden:

Hier müssen wir die /test-Konfiguration vor / setzen, was bedeutet, dass beim Eintritt der Route zuerst /test abgeglichen wird. Wenn das Projekt unter dem Root-Pfad / eine Unterroute /test hat, dann greift http://xxxx/test nur auf das Projekt in /www zu, nicht aber auf die Unterroute.

2. Projektkonfiguration

Um das Problem des falschen Ressourcenpfads nach dem Verpacken zu lösen, müssen Sie publicPath in vue.config.js konfigurieren. Es gibt zwei Konfigurationsmethoden, wobei publicPath jeweils auf ./ und /test konfiguriert wird:

Aktualisieren Sie die Nginx-Konfiguration und Sie können nach der Veröffentlichung normal darauf zugreifen. Hier gibt es Unterschiede zwischen den beiden Konfigurationsmethoden. Schauen wir uns die Unterschiede einmal an. Wenn Sie das Projekt nicht konfigurieren und den Zugriff direkt veröffentlichen, werden JS, CSS und andere Ressourcen möglicherweise nicht gefunden, was zu einer leeren Seite führt:

Der Grund für dieses Problem ist, dass der Ressourcenreferenzpfad falsch ist. Das Seitenüberprüfungselement zeigt, dass das von der Seite referenzierte JS vom Stammpfad aus referenziert wird:

Wenn Sie sich die gepackte Dateistruktur ansehen, können Sie sehen, dass sich Ressourcendateien wie js/css/img/static auf derselben Ebene wie index.html befinden:

publicPath wird als ./ konfiguriert und der Ressourcenreferenzpfad nach dem Verpacken ist ein relativer Pfad:

publicPath ist als /test konfiguriert und der relative Pfad der gepackten Ressource ist der absolute Pfad, beginnend beim Stammverzeichnis des Domänennamens:

Beide Konfigurationen können JS, CSS und andere Ressourcen korrekt finden. Es besteht jedoch immer noch ein Problem, nämlich, dass die statischen Ressourcen in static immer noch nicht gefunden werden können.

3. Das Problem, dass statische Ressourcen, auf die durch absolute Pfade verwiesen wird, nicht gefunden werden

Da öffentliche statische Ressourcen während des Verpackungsprozesses nicht von Webpack verarbeitet werden, müssen wir sie über absolute Pfade referenzieren. Wenn das Projekt in einem anderen Stammpfad als einer Domäne bereitgestellt wird, ist dies sehr problematisch. Sie müssen vor jeder referenzierten URL process.env.BASE_URL hinzufügen (der Wert entspricht dem oben konfigurierten öffentlichen Pfad), damit auf die Ressourcen normal zugegriffen werden kann. Wir können diesen Variablenwert in main.js an Vue.prototype binden, sodass jede Vue-Komponente ihn verwenden kann:

Vue.prototype.$pb = Prozess.Umgebung.BASE_URL

In Vorlage verwenden:

<img :src="`${$pb}static/logo.png`">

Ein größeres Problem, für das es keine gute Lösung gibt, ist jedoch die Verwendung statischer Ressourcen im öffentlichen Ordner im Komponentenstil:

• Wenn Sie ein Bild als Hintergrundbild usw. verwenden müssen, versuchen Sie, es inline zu verwenden, genau wie bei der Verwendung in einer Vorlage.
• Wenn Sie eine Stildatei importieren müssen, verwenden Sie die Interpolation, um sie in index.html zu importieren.

In Bezug auf das Problem der statischen Ressourcen empfiehlt vue-cli, dass Sie versuchen, Ressourcen als Teil Ihres Modulabhängigkeitsdiagramms zu importieren (d. h., sie in Assets zu platzieren und relative Pfadverweise zu verwenden). Die Vermeidung dieses Problems bringt auch andere Vorteile mit sich:

IV. Bereitstellung im Verlaufsmodus

Standardmäßig verwendet das Vue-Projekt den Hash-Routing-Modus, was bedeutet, dass die URL ein #-Zeichen enthält. Das #-Zeichen und der Inhalt dahinter bilden den Hash-Teil der Routing-Adresse. Normalerweise lädt der Browser die Seite neu, wenn sich die Adresse in der Adressleiste des Browsers ändert. Wenn der Hash-Teil jedoch geändert wird, geschieht dies nicht. Dies ist das Prinzip des Front-End-Routings, das eine teilweise Aktualisierung der Seite gemäß unterschiedlicher Routen ermöglicht, ohne die gesamte Seite zu aktualisieren. H5 hat eine pushState-Schnittstelle für den Verlauf hinzugefügt, die es Front-End-Operationen ermöglicht, die Routing-Adresse zu ändern, ohne eine Seitenaktualisierung auszulösen. Der Verlaufsmodus wird über diese Schnittstelle implementiert. Daher kann durch die Verwendung des Verlaufsmodus das #-Zeichen in der Route entfernt werden.

1. Projektkonfiguration

Konfigurieren Sie die Modusoption und die Basisoption in den Routingoptionen des Vue-Routers und legen Sie den Modus auf „Verlauf“ fest. Bei Bereitstellung in einem Stammverzeichnis, das nicht zu einer Domäne gehört, müssen Sie die Basisoption auch auf den oben konfigurierten Wert „publicPath“ konfigurieren. (Hinweis: In diesem Fall muss „publicPath“ das Konfigurationsformat für den absoluten Pfad /test verwenden, nicht den relativen Pfad ./.)

2. Nginx-Konfiguration

Für den Verlaufsmodus wird vorausgesetzt, dass das Projekt im Verzeichnis /test unter dem Domänennamen bereitgestellt wird. Beim Zugriff auf http://xxx/test/about sucht der Server nach dem Unterverzeichnis oder der Datei about unter dem Verzeichnis, auf das /test verweist. Da es sich offensichtlich um eine einseitige Anwendung handelt, gibt es kein Verzeichnis oder keine Datei a, was zu einem 404-Fehler führt:

Wir müssen nginx so konfigurieren, dass in diesem Fall der Server die Datei index.html der Einzelseitenanwendung zurückgeben kann und dann die restliche Routing-Analyse vom Front-End durchgeführt werden kann.

3. Der Verlaufsmodus wird in einem Nicht-Domänenstammpfad bereitgestellt

Wenn Sie in einem Nicht-Domänen-Stammverzeichnis bereitstellen, müssen Sie zuerst „publicPath“ konfigurieren. Der Punkt, der beachtet werden muss, wurde eigentlich schon erwähnt, nämlich, dass Sie in diesem Fall nicht den relativen Pfad ./ oder die leere Zeichenfolge verwenden können, um den öffentlichen Pfad zu konfigurieren. Warum?

Der Grund dafür ist, dass die Leistung des Router-Links und anderer Funktionen dadurch beeinträchtigt wird. Verwenden Sie das Testprojekt [2], um die beiden Konfigurationen zu verpacken und zu veröffentlichen. Der Unterschied ist durch Überprüfen der Elemente ersichtlich. Auf der Seite gibt es zwei Router-Links: „Home“ und „Info“:

Die Ergebnisse der beiden Konfigurationen nach der Verpackung sind wie folgt.

publicPath wird als ./ oder eine leere Zeichenfolge konfiguriert:

publicPath ist als /test konfiguriert:

Nachdem das Router-Link-Paket mit publicPath als relativen Pfad konfiguriert wurde, wird die Adresse zur Adresse relativ zum Stammdomänennamen, was offensichtlich falsch ist. Daher sollte publicPath für die Bereitstellung eines nicht domänenbezogenen Stammpfads als vollständiger Präfixpfad konfiguriert werden.

V. Fazit

Das ist alles, was ich zur Veröffentlichung des Vue-Projekts zu sagen habe. Ich habe dies erst erlebt, nachdem ich bei fast jedem Schritt die Fallstricke durchgemacht habe. Wenn Sie Fragen haben, können Sie diese gerne mit mir besprechen.

Verweise

[1] Veröffentlichung des Vue-Projektpakets: https://github.com/Lushenggang/vue-publish-test

[2] Adresse des Testprojekts für die Bereitstellung der Vue-Projektverpackung: https://github.com/Lushenggang/vue-publish-test

Dies ist das Ende dieses Artikels über die Paketierung und Bereitstellung von Vue-Projekten. Weitere relevante Inhalte zur Paketierung und Bereitstellung von Vue-Projekten finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!