So stellen Sie eine statische Vue-Seite in der Code-Cloud bereit

Mit der kontinuierlichen Weiterentwicklung der Front-End-Technologie beginnen immer mehr Unternehmen und Einzelpersonen, Vue.js zur Entwicklung von Front-End-Anwendungen zu verwenden. Für Vue.js-Entwickler ist die Bereitstellung statischer Vue-Seiten zu einer notwendigen Fähigkeit geworden.

Code Cloud ist eine inländische Open-Source-Code-Hosting-Plattform. Um Vue.js-Entwicklern dabei zu helfen, Projekte besser in der Cloud bereitzustellen, wird in diesem Artikel erläutert, wie Code Cloud zum Bereitstellen statischer Vue-Seiten verwendet wird.

1. Vorbereitung

Bevor wir statische Vue-Seiten bereitstellen, müssen wir sicherstellen, dass unser Projekt erfolgreich erstellt wurde. In Vue.js-Projekten wird normalerweise die Vue-CLI zum Erstellen verwendet. Die Ausgabe des Builds generiert ein dist-Verzeichnis, das alle statischen Ressourcen und Code enthält.

2. Erstellen Sie ein Warehouse und laden Sie Code hoch

Zuerst müssen wir ein Warehouse in Code Cloud erstellen. Melden Sie sich bei Code Cloud an, geben Sie „Code Cloud+“ ein, wählen Sie „Lager erstellen“ und geben Sie dann die entsprechenden Informationen ein, um die Erstellung des Lagers abzuschließen.

Nach Abschluss der Erstellung des Lagers müssen wir den lokalen Code in das Lager hochladen. Verwenden Sie im Stammverzeichnis des lokalen Vue-Projekts den folgenden Befehl:

git init
git add .
git commit -m 'first commit'
git remote add origin <仓库地址>
git push -u origin master

Dadurch wird unser Code erfolgreich in das Code Cloud Warehouse hochgeladen.

3. Konfigurieren des Warehouse

Nachdem wir den Code hochgeladen haben, müssen wir auch die Einstellungen des Warehouse konfigurieren, um sicherzustellen, dass unsere Webseite korrekt im Browser ausgeführt werden kann.

Wählen Sie im Warehouse „Einstellungen“ und fügen Sie den öffentlichen Schlüssel in der Spalte „Öffentlicher Bereitstellungsschlüssel“ hinzu. Es gibt zwei Möglichkeiten, ihn hinzuzufügen: Laden Sie den lokalen öffentlichen Schlüssel direkt hoch oder verwenden Sie den von Code Cloud generierten Schlüssel.

Nachdem das Hinzufügen abgeschlossen ist, müssen wir eine neue Filiale im Lager erstellen. Der Filialenname kann beliebig sein. Wählen Sie dann in den Einstellungen der Filiale „Statische Seite“ aus.

Auf der statischen Seite müssen wir GitHub Pages als Dienstanbieter und den Zweig als den Zweig auswählen, den wir gerade erstellt haben.

Als nächstes müssen wir die Eintragsdatei unserer statischen Seite ausfüllen, die sich hier auf unsere Homepage-Datei bezieht, normalerweise index.html. Nachdem die Zweig- und Eintragsdateieinstellungen abgeschlossen sind, können wir auf die Schaltfläche „Speichern“ klicken, um die Lagerkonfiguration abzuschließen.

4. Seite anzeigen

Nach Abschluss der Konfiguration können wir nun über den Browser auf unsere statische Seite zugreifen. Auf der Startseite des Lagers sehen wir die Schaltfläche „Git-Seiten“. Klicken Sie darauf, um auf unsere Bereitstellungswebseite zuzugreifen.

Es ist zu beachten, dass wir GitHub Pages verwenden, die standardmäßig unseren Warehouse-Namen als Domänennamen verwenden. Daher müssen Sie beim Zugriff auf die Seite nach dem Warehouse-Namen „/“ und den Namen der Eintragsdatei hinzufügen. Zum Beispiel:

https://用户名.gitee.io/仓库名/index.html

5. Bereitstellungsaktualisierungen

Nachdem wir die erste Bereitstellung abgeschlossen haben, wird unser Projekt möglicherweise häufig aktualisiert. Wie können wir also den neuen Code auf unserer Bereitstellungswebseite aktualisieren? Im Folgenden sind die spezifischen Schritte aufgeführt:

Zuerst müssen wir den Code im lokalen Projekt mit dem folgenden Befehl neu erstellen:

npm run build

Dadurch wird automatisch ein neuer dist-Ordner generiert, der unseren neu geänderten Code enthält.

Als nächstes müssen wir den folgenden Befehl im Code Cloud Warehouse verwenden, um den neuen Code in unseren neu erstellten Zweig zu übertragen:

git push origin 分支名

Nachdem der Upload abgeschlossen ist, können wir den aktualisierten Code direkt auf der statischen Seite des Browsers anzeigen.

Zusammenfassung

Durch die Einleitung dieses Artikels haben wir gelernt, wie man Code Cloud zum Bereitstellen statischer Vue-Seiten verwendet. In der tatsächlichen Entwicklung können wir es entsprechend verschiedenen spezifischen Situationen konfigurieren und anpassen. Ich hoffe, dieser Artikel ist für alle hilfreich.

Das obige ist der detaillierte Inhalt vonSo stellen Sie eine statische Vue-Seite in der Code-Cloud bereit. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!