Heim  >  Artikel  >  Web-Frontend  >  Manuelle reine statische Dateipaketierung und Bereitstellungsvorschau-Link (bereitgestellt auf GitHub), aus der offiziellen CLI-Datei von Vue, unter Verwendung von Garn

Manuelle reine statische Dateipaketierung und Bereitstellungsvorschau-Link (bereitgestellt auf GitHub), aus der offiziellen CLI-Datei von Vue, unter Verwendung von Garn

大佬别动我昵称
大佬别动我昵称Original
2021-11-12 23:08:16171Durchsuche

Nachdem Sie das Projekt geschrieben haben, müssen Sie es bereitstellen und veröffentlichen. Dieses mit vue@cli erstellte Projekt verfügt nur über statische Front-End-Dateien, ruft die Back-End-Schnittstelle auf und kann diesen Schritt verwenden, wenn es auf GitHub bereitgestellt wird.

Zu beachtende Punkte: 1. Ihr Gitbash ist installiert und konfiguriert

2. Jedes Mal, wenn Sie den Code ändern, müssen Sie ihn in die Produktionsumgebung übertragen

3. Dies ist ein manueller Aktualisierungsschritt, kann aber auch so sein Automatisch aktualisiert. Es sind zwei Umgebungen erforderlich. Daher müssen zwei Warehouses erstellt werden. Eines ist die Umgebung, in der der Code platziert wird, und das andere ist die Produktionsumgebung. Codeänderungen in der Codeumgebung erfordern Bulid. Dadurch wird eine neue Produktionslinienunterbrechung generiert und dann in das Lager verschoben, in dem die Produktionsumgebung gespeichert ist.

1, Befehlszeile

``` Garnaufbau

```

2.

Klicken Sie auf den Link und stellen Sie die Sprache auf Chinesisch um

![Link nach erfolgreichem Build]( https://img.php.cn/upload/image/421/242/536/1636642339926184.png „Link nach erfolgreichem Build“)

Verwenden Sie etwas, um das generierte Dist-Verzeichnis zu überwachen

~~~

Yarn Global Add Serve

Serve -s Dist

// Diese beiden Zeilen sollen sicherstellen, dass das Dist-Verzeichnis gepackt wird

~~~

Nach der Installation , der Webseiten-Port wird größer als 5000 und die gepackte Datei wird komprimiert,

3 Stellen Sie den richtigen publicPath in vue.config.js ein.

~~~

module.exports = {

publicPath: process.env.NODE_ENV === 'produktion'

? '/my-project/' //Der Name der Produktionsumgebung

: '/ ' / /

}

~~~

4. Erstellen Sie die Datei „deploy.sh“ im Projekt

~~~

#!/usr/bin/env sh

# Brechen Sie das Skript ab, wenn ein Fehler auftritt

set - e

# Build

npm run build

# cd in das Verzeichnis der Build-Ausgabe

cd dist

# Auf dem benutzerdefinierten Domänennamen bereitstellen

# echo 'www.example.com' > ; CNAME

git init

git add -A

git commit -m 'deploy'

# Bereitstellen auf https://.github.io

# git push -f git@github.com : /.github.io.git master

# Bereitstellen auf https://.github.io/

# git push -f git@github. com:.git master:gh-pages

cd -

~~~

Führen Sie dann „deploy.sh“ aus

~~~

//Sie müssen die Gitbash-Umgebung konfigurieren , cmder

shploy.sh

//führt den Befehl in der Datei aus

~~~

Das obige ist der detaillierte Inhalt vonManuelle reine statische Dateipaketierung und Bereitstellungsvorschau-Link (bereitgestellt auf GitHub), aus der offiziellen CLI-Datei von Vue, unter Verwendung von Garn. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn