Kürzlich bin ich auf einige häufige Probleme gestoßen, als ich Jenkins zur Implementierung der automatisierten H5-Veröffentlichung für die Uniapp-Entwicklung verwendete. Ich bin hier, um meine Lösung mit Ihnen zu teilen.
Frage 1: Wie verwende ich Uniapp, um ein H5-Projekt in Jenkins zu kompilieren?
Lösung: Installieren Sie Node.js und npm und installieren Sie die Abhängigkeitspakete von uni-app über npm. Erstellen Sie dann über das Jenkins-Plugin „NodeJS“ eine globale Umgebung und fügen Sie Umgebungsvariablen hinzu. Verwenden Sie im Jenkins-Build-Schritt den Node.js-Befehl „npm run build“, um das H5-Projekt zu kompilieren und zu verpacken.
Das Folgende ist die spezifische Code-Implementierung:
1. Abhängigkeitspakete installieren
npm install -g @vue/cli
npm install -g @vue/cli-init
npm install -g sass-loader node-sass
npm install -g uni-app-cli
2. Konfigurieren Sie „NodeJS“ in Jenkins
Suchen Sie in der Jenkins-Verwaltungsoberfläche nach „Global Tool Configuration“, fügen Sie das Tool „NodeJS“ hinzu und legen Sie den Installationspfad fest.
3. Führen Sie den Kompilierungsbefehl im Jenkins-Build-Schritt aus
vue-cli-service build --mode production
Frage 2: Wie veröffentliche ich das H5-Projekt auf dem angegebenen Server?
Lösung: Verwenden Sie das „SSH Plugin“-Plug-in von Jenkins, um über das SSH-Protokoll eine Verbindung zum Remote-Server herzustellen, und übertragen Sie die kompilierte H5-Projektdatei mit dem SCP-Befehl in das angegebene Verzeichnis auf dem Server.
Das Folgende ist die spezifische Code-Implementierung:
1. Installieren Sie das Plug-in „SSH Plugin“ in Jenkins
Suchen Sie in der Jenkins-Verwaltungsoberfläche nach „Plugins verwalten“, suchen Sie nach „SSH-Plugin“ und installieren Sie es.
2. Konfigurieren Sie den SSH-Server in Jenkins
Suchen Sie in der Jenkins-Verwaltungsoberfläche nach „SSH-Server“, fügen Sie die Informationen des SSH-Servers hinzu, zu dem Sie eine Verbindung herstellen müssen, einschließlich IP-Adresse, Benutzername, Passwort usw., und legen Sie die zu verwendende Authentifizierungsmethode fest.
3. Verwenden Sie den SCP-Befehl im Build-Schritt von Jenkins, um die H5-Projektdatei auf den Server hochzuladen
scp -r /path/to/local/project/dist/ user@remote:/path/to/remote/project
Im obigen Befehl ist „/path/to/local/project/dist/“ der lokal kompilierte Dateipfad des H5-Projekts und „user@remote:/path/to/remote/project“ ist die Adresse und der Dateipfad des Remote-Server. .
Frage 3: Wie nutzt man CDN-Ressourcen in H5-Projekten?
Lösung: Setzen Sie in der Konfigurationsdatei des Uniapp-Projekts das Attribut „publicPath“ auf die Adresse der CDN-Ressource. Zur Erstellungszeit generiert Webpack automatisch Pfade, die sich an CDN-Ressourcen anpassen.
Das Folgende ist die spezifische Code-Implementierung:
1. Fügen Sie die Konfiguration in vue.config.js des Projekts hinzu
module.exports = {
publicPath: 'https://cdn.example.com/',
}
2. Erstellen Sie das H5-Projekt neu und das Webpack verwendet automatisch den Pfad der CDN-Ressource.
Im Folgenden sind einige häufige Probleme und Lösungen aufgeführt, auf die ich bei der Verwendung von Jenkins zum Veröffentlichen von von uniapp entwickelten H5-Projekten gestoßen bin. Ich hoffe, hilfreich zu sein!