Stellen Sie das Vue-Projekt auf einem Linux-Server bereit

Stellen Sie das Vue-Projekt auf einem Linux-Server bereit

Fall 1

vue-cli erstellt das vue3-Projekt, lädt das Projekt auf den Linux-Server hoch, installiert Node auf dem Server und startet das Vue-Projekt.

Erstens gibt es lokal ein Vue-Projekt, auf das nach dem Start normal zugegriffen werden kann

Nach der lokalen Verpackung können Sie auch direkt darauf zugreifen

Wenn die Seite index.html nach dem Verpacken leer ist, müssen Sie im Stammpfad des Projekts eine neue vue.config.js erstellen und diese erneut verpacken.

Installieren Sie nodejs auf einem Linux-Server. Weitere Informationen finden Sie unter

# Laden Sie das komprimierte Node-Paket herunter. Der Pfad, in dem der Befehl ausgeführt wird, ist der Pfad, in dem der Download erfolgt. wget https://npm.taobao.org/mirrors/node/v12.16.1/node-v12.16.1-linux-x64.tar.gz      
# Schneiden Sie das komprimierte Paket in den Pfad /usr/local/bin/ und dekomprimieren Sie es tar -xvf node-v12.16.1-linux-x64.tar.gz       
# Ändern Sie den Ordnernamen in NodeJs   
  mv node-v12.16.1-linux-x64 NodeJs  
# Installieren Sie gcc        
  yum installiere gcc gcc-c++            
# Es gibt drei Dateien im Pfad /usr/local/bin/NodeJs/bin: node npm npx
# Legen Sie Softlinks für diese drei Dateien fest. Das Verzeichnis /usr/bin wird zum Speichern von Systembefehlen verwendet. Zu diesem Zeitpunkt entspricht das Ausführen von Node in einem beliebigen Pfad dem Ausführen der Datei im Pfad /usr/local/bin/NodeJs/bin/node. Nach dem Ausführen von Node gelangen Sie in die Node-Umgebung. ln -s /usr/local/bin/NodeJs/bin/node /usr/bin/node         
  ln -s /usr/local/bin/NodeJs/bin/npm /usr/bin/npm          
  ln -s /usr/local/bin/NodeJs/bin/npx /usr/bin/npx         
# Wechseln Sie in das Stammverzeichnis cd
# Knoten überprüfen 

Laden Sie das Vue-Projekt auf den Linux-Server hoch, kompilieren Sie es und führen Sie es aus

# Geben Sie das Stammverzeichnis des Vue-Projekts ein cd /home/web
# Abhängigkeiten installieren npm install
# Kompilieren und verpacken Sie npm run build
# Starten Sie das Projekt npm run serve 

prüfen

Fehlerzusammenfassung

Beim Kompilieren des Projekts auf dem Linux-Server wird der folgende Fehler gemeldet, der darauf hinweist, dass die Knotenversion zu niedrig ist.

Beim Kompilieren des Projekts auf dem Linux-Server wird der folgende Fehler gemeldet, der darauf hinweist, dass die Knotenversion 17.1.0 zu hoch ist

Lösung, Referenz

# Wenn Sie Node zuvor mit yum installiert haben, müssen Sie es deinstallieren und neu installieren. Die Installationsschritte finden Sie in der Installationsmethode mit „Quellpaket“ in diesem Blog. # Deinstallieren Sie nodejs
  yum entferne nodejs npm -y
# Rufen Sie /usr/local/lib auf und löschen Sie alle Ordner node und node_modules. # Rufen Sie /usr/local/include auf und löschen Sie alle Ordner node und node_modules. # Rufen Sie /usr/local/bin auf und löschen Sie die ausführbaren Dateien von node.

Wenn Sie beim Kompilieren oder Starten eines Projekts die Fehlermeldung "Unzureichende Berechtigungen" erhalten

Lösung

# Setzen Sie die Berechtigungen für die angegebene Datei chmod 777 /home/web/xxx

Fehler beim Ausführen des Projekts: Warnungen, die möglicherweise mit der Option --fix behoben werden können

Lösung: Ändern Sie "lint": "vue-cli-service lint" in package.json des Projekts in: eslint --fix --ext .js,.vue src

siehe

Fall 2

vue-cli erstellt das vue3-Projekt und legt die Dist-Datei nach dem Verpacken auf Tomcat ab

Installieren Sie Tomcat auf einem Linux-Server

# Verwenden Sie Docker, um den Tomcat-Container abzurufen. Docker Pull Tomcat   
# Starten Sie docker run -d -p 8080:8080 Tomcat im Hintergrund    
# Nach dem Start besucht der Browser http://192.168.0.102:8080/ und gibt 404 zurück
# Lösung:
# Öffnen Sie Port 8080 zur Außenwelt firewall-cmd --zone=public --add-port=8080/tcp --permanent  
# Starten Sie die Firewall neu, damit die Änderungen wirksam werden: firewall-cmd --reload     
# Geben Sie den Tomcat-Container ein docker exec -it Ausführen der Container-ID /bin/bash     
# Kopieren Sie alle Dateien im Verzeichnis webapps.dist in den Pfad webapps cp -r webapps.dist/* ./webapps        
# Löschen Sie das Verzeichnis webapps.dist rm -rf webapps.dist           
# Jetzt können Sie über den Browser auf die Tomcat-Seite zugreifen, aber das Tomcat-Bild zeigt nach dem Neustart immer noch 404 an. Sie müssen den aktuell geänderten Container als neues Bild übermitteln. # Beenden, ohne den Container anzuhalten Strg + P + Q                  
# Senden Sie einen benutzerdefinierten Container im laufenden Zustand. tomcat10:10.1 ist mein benutzerdefinierter Imagename und meine Versionsnummer. docker commit -a="Author" -m="Notes" Die ID des laufenden Containers ist tomcat10:10.1       
#Stoppen Sie den aktuellen Tomcat-Container. Docker stoppt die laufende Container-ID    
# Löschen Sie die Container-ID nach dem Ausführen von Docker RM    
# Starten Sie das Image, das Sie übermittelt haben docker run -d -p 8080:8080 tomcat10:10.1         
 
# Ergänzung# Beim Starten des Tomcat-Image wird ein Fehler gemeldet: Treiber konnte externe Konnektivität am Endpunkt quirky_allen nicht programmieren
# Fehlerursache: Port 8080 war beim letzten Start des Backend-Projekts belegt, daher muss das Backend-Projekt beendet werden. # Testen Sie dies, indem Sie http://192.168.0.102:8080 aufrufen und auf der Tomcat-Seite den erfolgreichen Start anzeigen.

Legen Sie das gepackte Projekt in den Tomcat-Container

# Erstellen Sie einen freigegebenen Ordner mkdir -p /home/mydocker/mytomcat8080/data
# Container 8080 starten:
  Docker-Ausführung \
  -p 8080:8080 \
  --name mein-tomcat8080 \
  -v /home/mydocker/mytomcat8080/data:/usr/local/tomcat/webapps \
  -D \
  Tomcat10:10.1
# Fehler beim Starten des Containers: Docker: ungültiges Referenzformat.
# Fehlerursache: Der Docker-Befehl ist falsch geschrieben. Hier habe ich -v /home/mydocker/mytomcat8080/data:/usr/local/tomcat/webapps geschrieben \ Nach dem Doppelpunkt steht ein zusätzliches Leerzeichen # Rufen Sie das Stammverzeichnis des Vue-Projekts auf und generieren Sie nach dem Verpacken einen Dist-Ordner. Hier verwenden wir in Fall 1 immer noch das Projekt npm install
  npm-Ausführung erstellen
# Kopieren Sie die gepackten Dateien nach Tomcat
  mv dist /home/mydocker/mytomcat8080/data
#Starten Sie den Tomcat-Container neu. Docker startet die Tomcat-Container-ID neu.
# Test, lokaler Zugriff http://192.168.0.102:8080/dist/ 

Damit ist dieser Artikel zum Bereitstellen von Vue-Projekten auf Linux-Servern abgeschlossen. Ich hoffe, dass es für jedermanns Studium hilfreich sein wird, und ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren:
  • Lösung für die leere Seite nach einem vue.js-gepackten Projekt
  • Lösung für den Vue3.0-Fehler: Modul „worker_threads“ kann nicht gefunden werden

<<:  Div adaptive Höhe füllt automatisch die verbleibende Höhe

>>:  Probleme bei der Konfiguration von https-Server und Reverse-Proxy mit Nginx unter Windows

Artikel empfehlen

Docker startet im Status „Beendet“

Nach dem Docker-Lauf ist der Status immer „Beende...

Beispiele für minimalistisches Website-Design

Webanwendungsklasse 1. DownFürAlleOderNurIch Mith...

Vue-Beispielcode zur einfachen Implementierung von virtuellem Scrollen

Inhaltsverzeichnis Vorwort Rollprinzip erreichen ...

jQuery implementiert Akkordeon-Kleinbuchstaben

Dieser Artikel gibt Ihnen den spezifischen Code v...

960 Grid System – Grundprinzipien und Verwendung

Natürlich gibt es auch viele Leute, die die gegent...

Detaillierte Erläuterung der MySQL-Datenbankisolationsebene und des MVCC

Inhaltsverzeichnis 1. Isolationsstufe LESEN SIE U...

Windows Server 2019 installieren (grafisches Tutorial)

Windows Server 2019 ist das neueste Server-Betrie...

Google Translate Tool: Mehrsprachige Webseiten schnell umsetzen

Google China hat ein Übersetzungstool veröffentlic...

Nicht standardmäßiger Implementierungscode für die MySQL UPDATE-Anweisung

Heute werde ich Ihnen einen Unterschied zwischen ...

Vollständiger Vue-Code zur Implementierung der Single-Sign-On-Steuerung

Hier ist zu Ihrer Information eine Vue-Single-Sig...

Gründe, warum MySQL-Abfragen langsam sind

Inhaltsverzeichnis 1. Wo ist die Langsamkeit? 2. ...

Spezifische Schritte für den Vue-Browser zur Rückgabe der Überwachung

Vorwort Beim Teilen einer Seite hoffen Sie, durch...