So stellen Sie den Server im Vue-Projekt bereit

Angesichts der Beliebtheit des Vue-Frameworks in der Web-Frontend-Entwicklung verwenden immer mehr Entwickler Vue, um ihre eigenen Webanwendungen zu erstellen. Für die meisten Entwickler stellt die lokale Entwicklung von Vue-Projekten kein Problem dar, aber die Bereitstellung des Projekts auf dem Server ist ein schwierigeres Problem. In diesem Artikel werden einige Erfahrungen und Techniken zum Bereitstellen von Vue-Projekten auf Servern geteilt.

1. Vorbereitung der Serverumgebung

Bevor Sie das Vue-Projekt bereitstellen, müssen Sie einen Server vorbereiten und die Node.js- und NPM-Umgebung installieren. Node.js ist eine auf der Chrome V8-Engine basierende JavaScript-Ausführungsumgebung, die JavaScript-Code ausführen kann, und NPM ist das Paketverwaltungstool von Node.js, das zum Installieren, Verwalten und Veröffentlichen von JavaScript-Paketen verwendet wird. Wenn Sie Node.js und NPM nicht installiert haben, installieren Sie bitte zuerst diese beiden Softwareprogramme.

Darüber hinaus müssen Sie auch die beiden Tools Git und PM2 auf dem Server installieren. Git ist ein Versionskontrollsystem, das zum Abrufen von Code aus der Codebasis verwendet wird, während PM2 ein Daemon-Prozessmanager ist, der starten, stoppen und neu starten kann . und Überwachung von Node.js-Anwendungen.

2. Nginx-Server konfigurieren

Bevor Sie das Vue-Projekt auf dem Server bereitstellen, müssen Sie den Nginx-Server für die Verarbeitung von HTTP-Anfragen konfigurieren. Nginx ist ein leistungsstarker HTTP- und Reverse-Proxy-Server, der Anfragen an verschiedene Ports weiterleiten und auch SSL-Zertifikate zur Bereitstellung von HTTPS-Unterstützung aktivieren kann.

Bevor Sie Nginx konfigurieren, müssen Sie das Vue-Projekt in eine statische Datei packen. Dies kann durch Verwendung des Build-Befehls in der Vue-CLI erreicht werden:

$ npm run build

Nach der Ausführung dieses Befehls wird ein dist-Verzeichnis im Projektstamm generiert Verzeichnis. Es enthält gepackte statische Dateien.

Als nächstes installieren Sie Nginx auf dem Server mit dem folgenden Befehl:

$ sudo apt-get update
$ sudo apt-get install nginx

Nach Abschluss der Installation können Sie die Datei /etc/nginx/sites-available/default bearbeiten, um den Nginx-Server zu konfigurieren:

server {
    listen 80 default_server;
    listen [::]:80 default_server;
    root /var/www/html;
    index index.html;

    server_name example.com;

    location / {
        try_files $uri $uri/ /index.html;
    }
}

In diesem Beispiel: a Beim Abhören des Nginx-Servers an Port 80 wird die Root-Direktive zum Festlegen des Stammverzeichnisses von Nginx verwendet, mit server_name wird der Servername festgelegt und mit der Location-Direktive wird die Anforderungsroute festgelegt.

Da es sich beim Vue-Projekt um eine Single-Page-Anwendung (SPA) handelt, ist zu beachten, dass alle Seiten dynamisch von JavaScript und CSS generiert werden. Daher muss dem Nginx-Server eine Standortanweisung hinzugefügt werden, um das dynamische Routing zu verarbeiten:

location /api/ {
    proxy_pass http://localhost:3000/;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;
    proxy_cache_bypass $http_upgrade;
}

In diesem Beispiel wird der /api/-Pfad bei Anforderung an Port 3000 des lokalen Computers weitergeleitet und einige HTTP-Header-Informationen werden festgelegt.

3. Stellen Sie das Vue-Projekt auf dem Server bereit.

Sobald der Nginx-Server konfiguriert ist, kann das Vue-Projekt auf dem Server bereitgestellt werden. Hier sind einige spezifische Schritte:

1. Verwenden Sie Git auf dem Server, um den Vue-Projektcode abzurufen:

$ git clone https://github.com/username/vue-project.git

2. Geben Sie das Projektverzeichnis ein und installieren Sie Abhängigkeiten:

$ cd vue-project
$ npm install

3. Erstellen Sie eine PM2-Konfigurationsdatei im Projektstammverzeichnis:

{
  "name": "vue-project",
  "script": "npm",
  "args": "start",
  "env": {
    "NODE_ENV": "production"
  }
}

In diesem Beispiel wird ein Prozess namens vue-project konfiguriert, die Anwendung mit dem Befehl npm start gestartet und die Produktionsumgebungsvariablen festgelegt.

4. Starten Sie ein Vue-Projekt mit PM2:

$ pm2 start pm2.config.js

Auf diese Weise können Sie ein Vue-Projekt auf dem Server starten und auf die Anwendung zugreifen, indem Sie auf die URL auf dem Nginx-Server zugreifen.

4. Fazit

In diesem Artikel haben wir vorgestellt, wie das Vue-Projekt auf dem Server bereitgestellt wird. Durch einfache Konfiguration kann das Vue-Projekt in der Produktionsumgebung bereitgestellt werden, und Nginx und PM2 werden verwendet, um leistungsstarke HTTP-Dienst- und Prozessverwaltungsfunktionen bereitzustellen. Ich hoffe, dass dieser Artikel für Entwickler hilfreich ist, die Vue-Projekte auf dem Server bereitstellen möchten.

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