Bereitstellung der NodeJS-Produktionsumgebung vue

Node.js-Produktionsbereitstellung von Vue

Bei der Entwicklung einer Vue.js-Anwendung ist die Bereitstellung Ihrer Anwendung ein entscheidender Schritt. In diesem Artikel erfahren Sie, wie Sie eine Vue.js-Anwendung in einer Produktionsumgebung bereitstellen und dabei Node.js als Laufzeitumgebung verwenden. In diesem Artikel werfen wir einen genaueren Blick darauf, wie man eine Anwendung zu einer Produktionsumgebung hinzufügt und auf einem Server ausführt.

Vorbereitung

Bevor Sie beginnen, müssen Sie Node.js, npm und Git auf dem Server installieren. In diesem Artikel verwenden wir UbuntuLinux als Server, aber Sie können die Bereitstellung auch auf anderen Systemen mit ähnlichen Schritten durchführen:

1. Installieren Sie Node.js und npm:

$ sudo apt-get install curl
$ curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash -
$ sudo apt-get install nodejs
$ sudo apt-get install npm

2. Bestätigen Sie, dass Node.js und npm korrekt installiert sind:

$ node -v
$ npm -v

3. Installieren Sie Git:

$ sudo apt-get install git

4. Bestätigen Sie, ob Git korrekt installiert ist:

$ git --version

Vue CLI installieren

Vue CLI ist ein offizielles Befehlszeilentool, das auf Vue.js basiert und uns dabei helfen kann, Vue schnell zu erstellen .js-Anwendung. Wir müssen Vue CLI global auf dem Server installieren:

$ npm install -g @vue/cli

Sie können überprüfen, ob Vue CLI korrekt installiert wurde, indem Sie den folgenden Befehl ausführen:

$ vue --version

Erstellen Sie eine Vue.js-Anwendung

Als Nächstes möchten wir eine Vue erstellen. js-Anwendung. Mit Vue CLI können wir ganz einfach ein neues Projekt erstellen oder ein vorhandenes Projekt verwenden.

1. Gehen Sie im Terminal in das Verzeichnis, in dem Sie das Projekt erstellen möchten:

$ cd /path/to/directory

2. Erstellen Sie ein neues Vue.js-Projekt mit der Vue-CLI:

$ vue create my-project

Hier ist my-project der Name Ihres Projekts . Wenn Sie diesen Befehl ausführen, werden einige Optionen zum Anpassen Ihres Vue.js-Projekts angezeigt. Es erstellt eine neue Vue.js-Anwendung für Sie und installiert alle erforderlichen Abhängigkeiten.

3. Gehen Sie in das Projekt, das Sie gerade erstellt haben:

$ cd my-project

4. Starten Sie die Vue.js-Anwendung:

$ npm run serve

Erstellen Sie einen Produktions-Build

Jetzt müssen wir einen Produktions-Build für unsere Anwendung erstellen. Der Produktions-Build wird unsere Anwendung optimieren, um effizienter zu sein und unnötigen Code zu reduzieren. Mit dem folgenden Befehl können wir einen Produktions-Build für unsere Anwendung erstellen:

$ npm run build

Dieser Befehl erstellt einen Produktions-Build im dist-Verzeichnis Ihrer Anwendung. An diesem Punkt sind wir bereit, die Anwendung in der Produktion bereitzustellen.

Vue.js-Anwendung bereitstellen

Da wir nun den Produktions-Build erstellt haben, stellen wir unsere Anwendung mithilfe der folgenden Schritte in der Produktion bereit:

1. Erstellen Sie auf Ihrem Server ein leeres Verzeichnis für Speicherdateien für Ihre Anwendung.

$ mkdir /var/www/myapp

2. Laden Sie die Build-Dateien Ihrer Anwendung von Ihrem lokalen Computer auf den Server hoch. Sie können den scp-Befehl verwenden, um Ihren App-Build hochzuladen, oder Sie können Git verwenden:

$ git clone <repository-url> /var/www/myapp

3. http-server und pm2 installieren:

$ npm install -g http-server
$ npm install -g pm2

4. http-server im myapp-Verzeichnis starten:

$ http-server dist

5. in PM2 starten Prozess im myapp-Verzeichnis:

$ pm2 start http-server --name myapp -- --cors -p 80

Dieser Befehl startet einen PM2-Prozess und startet die Anwendung als http-Server-Prozess. Außerdem wird der Port der Anwendung auf 80 gesetzt, sodass die Anwendung durch Zugriff auf die IP-Adresse des Hosts angezeigt werden kann.

Fazit

Jetzt haben wir die Vue.js-Anwendung erfolgreich in der Produktion bereitgestellt. Wenn Sie die Schritte in diesem Artikel befolgt haben, sollten Sie Ihre Anwendung bereits auf dem Server anzeigen können. Wenn Sie Fragen haben oder auf Probleme stoßen, hinterlassen Sie bitte eine Nachricht oder schauen Sie sich die offizielle Dokumentation von Vue.js oder Node.js an, um weitere Lösungen zu finden.

Das obige ist der detaillierte Inhalt vonBereitstellung der NodeJS-Produktionsumgebung vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!