Schritte zum Verpacken und Bereitstellen des Vue-Projekts auf dem Apache-Server

In der Entwicklungsumgebung wird das Vue-Projekt über den Befehl „npm run dev“ ausgeführt, der auf dem lokalen Aufbau eines Express-Servers basiert.

Auf dem Server ist dies jedoch nicht der Fall. Das gesamte Projekt muss mit dem Befehl npm run build gepackt werden. Nach dem Packen wird im Projektverzeichnis ein dist-Ordner mit folgendem Inhalt generiert:

Dann legen Sie diese Dateien einfach in einem Ordner auf dem Server ab. Mein Ordnername ist ibms

Aufgetretene Probleme:

1. Gehen Sie direkt zu http://www.xxx.com/ibms/. Sie werden feststellen, dass die Webseite nur einen weißen Bildschirm ohne Inhalt hat. Das ist ziemlich seltsam. Tatsächlich liegt es daran, dass es ein Problem mit dem Ressourcen-Ladepfad gibt!

Lösung:

Ändern Sie die Webpack-Konfiguration im Build in index.js in der Konfiguration:

assetPublicPath: "/ibms/"

Fügen Sie der index.js-Konfiguration im Router Folgendes hinzu:

exportiere standardmäßig einen neuen Router({
 Modus: "Verlauf",
 scrollBehavior: () => ({ y: 0 }),
 base: '/ibms/', // füge diese Zeile hinzu: constantRouterMap
})

Anschließend verpacken Sie es mit npm run build neu und legen es dann im IBMs-Ordner auf dem Server ab. Anschließend kann normal auf die Seite zugegriffen werden.

2. Aktualisieren Sie die aktuelle Seite oder greifen Sie über die URL-Leiste auf eine Unterseite zu. Sie werden feststellen, dass die Webseite den Fehler 404 aufweist. Dies liegt daran, dass der Modus des Vue-Routings der Verlaufsmodus ist.

Lösung:

Leiten Sie alle Anfragen einfach an http://www.xxx.com/ibms/index.html weiter.

Als Webserver verwende ich hier Apache. Erstelle eine neue .htaccess-Datei im ibms-Verzeichnis (auf gleicher Ebene wie index.html) und bearbeite den Code.

<IfModule mod_rewrite.c>
  RewriteEngine aktiviert
  RewriteBase /ibms/
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  UmschreibenCond %{REQUEST_FILENAME} !-d
  RewriteRule . /ibms/index.html [L]
</IfModule>

Der Zweck dieser Konfiguration besteht darin, alle Anfragen, die auf dem Server nicht vorhanden sind, an index.html weiterzuleiten. (PS: Denken Sie daran, den Apache-Server neu zu starten)

Dies ist das Ende dieses Artikels über die Schritte zum Verpacken und Bereitstellen des Vue-Projekts auf dem Apache-Server. Weitere relevante Informationen zum Verpacken und Bereitstellen von Vue-Projekten auf Apache finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!