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

Verwenden Sie die Befehle more, less und cat in Linux, um Dateiinhalte anzuzeigen

Unter Linux können die Befehle cat, more und less...

Vorteile und Probleme des XHTML CSS Website Designs

XHTML ist die derzeit international verbreitete S...

Referenz zum Detaildesign des Benutzererlebnisses auf B2C-Websites

Als ich kürzlich Apple.com/Ebay.com/Amazon.com/sh...

Eine einfache Methode zum Ändern der Größe hochgeladener Nginx-Dateien

Originallink: https://vien.tech/article/138 Vorwo...

Tutorial zur Installation und Kennwortkonfiguration von MySQL 5.7.21

Tutorial zur Installation und Kennworteinstellung...

Geben Sie einige Tipps zur Verwendung von JavaScript-Operatoren

Inhaltsverzeichnis 1. Optionaler Verkettungsopera...

3 häufige Fehler beim Lesen von MySQL Binlog-Protokollen

1. mysqlbinlog: [FEHLER] unbekannte Variable „def...

Vue implementiert eine einfache bidirektionale Datenbindung

In diesem Artikelbeispiel wird der spezifische Co...

Vue implementiert den Lupeneffekt beim Tab-Umschalten

In diesem Artikelbeispiel wird der spezifische Co...

Vue + Openlayer realisiert den Drag- und Rotationsverformungseffekt von Grafiken

Inhaltsverzeichnis Vorwort Ressourcen zum Thema E...