如何使用jenkins一鍵打包發(fā)布vue項(xiàng)目

這篇文章主要介紹如何使用jenkins一鍵打包發(fā)布vue項(xiàng)目，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

jenkins的安裝

Jenkins是一款開源 CI&CD 軟件，用于自動(dòng)化各種任務(wù)，包括構(gòu)建、測試和部署軟件。

Jenkins 支持各種運(yùn)行方式，可通過系統(tǒng)包、Docker 或者通過一個(gè)獨(dú)立的 Java 程序。

安裝

這里的操作系統(tǒng)為WSL Ubuntu，其它系統(tǒng)的安裝的請參考jenkins官方文檔

wget -q -O - https://pkg.jenkins.io/debian/jenkins.io.key | sudo apt-key add -
sudo sh -c 'echo deb http://pkg.jenkins.io/debian-stable binary/ > /etc/apt/sources.list.d/jenkins.list'
sudo apt-get update
sudo apt-get install jenkins

更換端口號(hào)（默認(rèn)運(yùn)行在8080端口）

jenkins的配置文件在 /etc/default/jenkins；在其中找到HTTP-PORT并修改

運(yùn)行

sudo systemctl start jenkins
# OR
sudo service jenkins start

如果要開機(jī)自動(dòng)運(yùn)行

sudo systemctl enable jenkins

如果運(yùn)行時(shí)碰到如下圖的錯(cuò)誤，請先安裝jdk

基礎(chǔ)配置

啟動(dòng)成功后輸入對應(yīng)的地址(ip:port)進(jìn)入jenkins管理界面-如下圖

在上圖中紅色字體對應(yīng)的文件中拿到默認(rèn)的管理員密碼-具體命令

cat /var/lib/jenkins/secrets/initialAdminPassword

命令執(zhí)行完成后返回如下圖

輸入密碼之后進(jìn)入到自定義Jenkins界面（如下圖）

在此界面我們選擇安裝推薦的插件就會(huì)開始安裝插件；如下圖

插件安裝完成后就會(huì)自動(dòng)進(jìn)入設(shè)置用戶名密碼界面（如下圖）

輸入完成后點(diǎn)擊按鈕保存并完成就會(huì)進(jìn)入下一個(gè)界面實(shí)例配置

點(diǎn)擊按鈕保存并完成就進(jìn)入一個(gè)新界面，再點(diǎn)擊其中的按鈕開始使用Jenkins就進(jìn)入了jenkins的主界面（如下圖），至此就完成了jenkins的安裝與基礎(chǔ)配置。

發(fā)布vue項(xiàng)目

> 打包vue項(xiàng)目需要nodejs，打包完成后需要通過ssh把打包好的文件上傳到目標(biāo)服務(wù)器上。所以下面我們將會(huì)來安裝jenkins的nodejs插件和Publish Over SSH插件。

安裝插件-nodejs

在jenkins主界面工作臺(tái)，依次點(diǎn)擊系統(tǒng)管理>插件管理進(jìn)入插件管理界面(如下圖)

搜索結(jié)果如下圖

勾選完插件并點(diǎn)擊安裝后進(jìn)入到插件下載界面(如下圖)

配置nodejs插件

在jenkins主界面工作臺(tái)，依次點(diǎn)擊系統(tǒng)管理>全局工具設(shè)置進(jìn)入插件管理界面并找到NodeJs選項(xiàng)(如下圖)

安裝Publish Over SSH插件并配置

Publish Over SSH插件的安裝和nodejs插件是一樣，安裝完成后開始配置插件；

在jenkins主界面工作臺(tái)，依次點(diǎn)擊系統(tǒng)管理>系統(tǒng)配置進(jìn)入插件配置界面，滾動(dòng)到Publish over SSH的位置，然后點(diǎn)擊SSH Servers下面的新增按鈕(如下圖)

點(diǎn)擊按鈕高級后出現(xiàn)的界面如下

創(chuàng)建任務(wù)

至此，打包vue所需的jenkins插件都已經(jīng)安裝完成，下面我們開始創(chuàng)建vue項(xiàng)目打包的任務(wù)。

具體操作如下圖

點(diǎn)擊按鈕確定后，如下圖

安裝上圖所說的配置完成后點(diǎn)擊保存按鈕就會(huì)跳轉(zhuǎn)到所創(chuàng)建任務(wù)的詳情界面。

至此一個(gè)我們便實(shí)現(xiàn)了一個(gè)簡單的一鍵打包前端項(xiàng)目的jenkins配置。

以上是“如何使用jenkins一鍵打包發(fā)布vue項(xiàng)目”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！