So stellen Sie das Vue.js-Projekt auf dem Server bereit

Mit der Entwicklung der Front-End-Technologie ist der Umfang der Front-End-Verantwortung größer geworden. Vue.js wird als JavaScript-Framework häufig in der Front-End-Entwicklung verwendet. Da die Anwendung weiter wächst, muss die Vue.js-Anwendung auf dem Server bereitgestellt werden, damit in einem Webbrowser darauf zugegriffen werden kann. In diesem Artikel wird erläutert, wie Sie eine Vue.js-Anwendung auf dem Server bereitstellen.

1. Packen des Vue.js-Projekts

Bevor Sie eine Vue.js-Anwendung bereitstellen, müssen Sie zunächst die Vue.js-Anwendung packen. Beim Packen einer Vue.js-Anwendung werden alle statischen Dateien der Anwendung gesammelt und in einer oder mehreren Dateien zusammengeführt. Der Zweck der Paketierung besteht darin, die Ladegeschwindigkeit Ihrer Anwendung zu erhöhen und deren Entwicklung und Bereitstellung zu vereinfachen.

Für Vue.js-Anwendungen können Sie die Vue-CLI zum Packen verwenden. Vue CLI ist ein Vue.js-Befehlszeilentool, mit dem Vue.js-Projekte schnell erstellt und verwaltet werden können. Stellen Sie zunächst sicher, dass Vue CLI auf Ihrem lokalen Computer installiert ist. Geben Sie im Befehlsterminal den folgenden Befehl ein:

npm install -g @vue/cli

Nach Abschluss der Installation von Vue CLI können Sie mit dem folgenden Befehl ein Vue.js-Projekt erstellen:

vue create my-vue-app

Then , geben Sie das Vue.js-Projektverzeichnis ein und verwenden Sie zum Packen den folgenden Befehl:

npm run build

Dieser Befehl packt die Vue.js-Anwendung in einen Ordner namens „dist“. Der gepackte Ordner enthält alle statischen Dateien der Anwendung und eine „index.html“-Datei, die direkt mit einem Browser geöffnet werden kann.

2. Serverauswahl

Bevor Sie die Vue.js-Anwendung auf dem Server bereitstellen, müssen Sie einen geeigneten Server auswählen. Es gibt viele verschiedene Arten von Servern, die zum Hosten von Vue.js-Anwendungen verwendet werden können, wie zum Beispiel Apache, Nginx, Express usw. Hier wählen wir Nginx als Server.

Nginx ist ein leichter Webserver mit starker Leistung und wird von vielen großen Websites verwendet. Nginx ist hoch skalierbar und anpassbar und kann auf Betriebssystemen wie Ubuntu und CentOS ausgeführt werden.

3. Serverkonfiguration

Vor der Installation von Nginx müssen Sie die Softwarepakete auf dem Server aktualisieren. Geben Sie im Befehlsterminal den folgenden Befehl ein:

sudo apt update
sudo apt upgrade

Nach der Aktualisierung des Softwarepakets können Sie Nginx mit dem folgenden Befehl installieren:

sudo apt-get install nginx

Nachdem die Installation abgeschlossen ist, wird Nginx startet automatisch. Sie können den Betriebsstatus von Nginx mit dem folgenden Befehl überprüfen:

sudo systemctl status nginx

Wenn alles normal ist, werden Sie sehen, dass Nginx ausgeführt wird.

Als nächstes müssen Sie die Nginx-Konfigurationsdatei ändern, um die Vue.js-Anwendung zu verwenden. Zuerst müssen Sie die Standardkonfigurationsdatei von Nginx sichern. Geben Sie im Befehlsterminal den folgenden Befehl ein:

sudo mv /etc/nginx/sites-available/default /etc/nginx/sites-available/default.bak

Nachdem die Sicherung abgeschlossen ist, können Sie eine neue Konfigurationsdatei erstellen. Geben Sie den folgenden Befehl in das Befehlsterminal ein:

sudo nano /etc/nginx/sites-available/default

Fügen Sie Folgendes zur Datei hinzu:

server {
  listen 80;
  server_name your-server-ip;

  location / {
      root /var/www/html/dist;
    index index.html;
    try_files $uri $uri/ /index.html;
  }
}

Ersetzen Sie „your-server-ip“ unbedingt durch die IP-Adresse von Auf Ihrem Server ersetzen Sie „/var/www/html/dist“ durch den Verpackungsordnerpfad Ihrer Vue.js-Anwendung.

Speichern und beenden Sie die Datei und starten Sie dann Nginx neu, damit die Änderungen wirksam werden. Geben Sie den folgenden Befehl in das Befehlsterminal ein:

sudo systemctl restart nginx

4. Stellen Sie die Vue.js-Anwendung bereit.

Jetzt ist die Vue.js-Anwendung bereit für die Bereitstellung auf dem Server. Der Verpackungsordner Ihrer Vue.js-Anwendung kann mit Tools wie SCP oder FTP auf den Server hochgeladen werden. Nachdem der Upload abgeschlossen ist, stellen Sie bitte sicher, dass die Berechtigungen des Verpackungsordners so eingestellt sind, dass der Nginx-Benutzer Zugriff hat: IP-Adresse für den Zugriff auf die Vue.js-Anwendung.

Zusammenfassung

Packen Sie Vue.js-Anwendungen über die Vue-CLI und verwenden Sie Nginx als Server für die Bereitstellung. Sie können Vue.js-Anwendungen schnell und einfach im Internet bereitstellen. Sie können die Konfigurationsdatei von Nginx frei an Ihre Bedürfnisse anpassen. Die Bereitstellung von Vue.js-Anwendungen erfordert Vorsicht, aber es ist auch eine Fähigkeit, die jeder Vue.js-Entwickler beherrschen sollte.

Das obige ist der detaillierte Inhalt vonSo stellen Sie das Vue.js-Projekt auf dem Server bereit. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!