Vue3-Projektpaketierung

Wenn Sie bereit sind, Ihre Anwendung in der Produktionsumgebung zu veröffentlichen, müssen Sie das Vue-Projekt paketieren.

Verwenden Sie den folgenden Befehl, um das Vue-Projekt zu paketieren:

npm run build

Führen Sie den obigen Befehl aus, und die Ausgabe lautet wie folgt:

Nach der Ausführung wird im Vue-Projekt ein Verzeichnis erzeugt:dist-Verzeichnis, das im Allgemeinen die Datei index.html und das Verzeichnis static enthält. Das Verzeichnis static enthält die statischen Dateien js, css und das Bildverzeichnis images (falls Bilder vorhanden sind).

Wenn Sie index.html direkt per Doppelklick öffnen, kann die Seite im Browser leer angezeigt werden. Um sie korrekt anzuzeigen, müssen Sie die Pfade der js- und css-Dateien in der Datei index.html ändern.

Wenn wir beispielsweise die Datei dist/index.html öffnen, sehen wir, dass die Dateipfade für css und js absolute Pfade sind:

<link href=/static/css/app.33da80d69744798940b135da93bc7b98.css rel=stylesheet>
<script type=text/javascript src=/static/js/app.717bb358ddc19e181140.js></script>
...

Wir ändern die Dateipfade für js und css in relative Pfade:

<link href=static/css/app.33da80d69744798940b135da93bc7b98.css rel=stylesheet>
<script type=text/javascript src=static/js/app.717bb358ddc19e181140.js></script>
...

Auf diese Weise können Sie direkt auf die Datei dist/index.html doppelklicken, um den Effekt im Browser zu sehen.