---

前言

前面已經使用jenkins部署了后端springboot項目，現在開始學習jenkins部署前端Vue項目。

---

一、安裝nginx

訪問nginx官網，https://nginx.org/en/download.html下載tar包

上傳到服務器目錄中
然后到上傳文件夾解壓nginx

tar -zxvf nginx-1.28.0.tar.gz

安裝相關依賴

yum -y install gcc zlib zlib-devel pcre-devel openssl openssl-devel 

創建nginx文件夾

mkdir -p /usr/local/nginx

到解壓目錄下執行

./configure

執行完以后進行編譯

make

編譯完以后進行安裝

make install

修改nginx配置文件

vi /usr/local/nginx/conf/nginx.conf

啟動nginx，后續打包直接替換里面的html文件夾，刷新頁面，無需重啟即可實現改動

sudo /usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf

二、jenkins構建項目

創建任務

輸入描述信息

復制人人開源的代碼地址

粘貼到源碼管理中，因為人人開源項目是公開的所以不需要憑證也可以

構建步驟選擇執行shell

粘貼以下命令，注意nginx的地址

# 在執行過程中若遇到使用了未定義的變量或命令返回值為非零，將直接報錯退出
set -eu
echo "<-------------------------------------->"
echo "安裝依賴"
npm installecho "<-------------------------------------->"
echo "打包出dist文件夾"
npm run build:prod# 先刪除nginx下的舊數據
rm -rf /home/soft/nginx-1.28.0/html/*
# 再將新數據拷貝到nginx下 -r 拷貝子文件
cp -r dist/* /home/soft/nginx-1.28.0/html/

建議切換npm鏡像源，不然打包會很慢
切換淘寶源方法如下：

npm config set registry https://registry.npmmirror.com

驗證

npm config get registry

然后保存，點擊立即構建

查看控制臺日志

我這里好像因為權限問題報錯了，我在命令上加個sudo試試

中途又出現了chromedriver@2.27.2 install: node install.js錯誤

還有node-sass@6.0.1 postinstall: node scripts/build.js錯誤
修改jenkins中的構建shell在npm install 之前增加以下內容

sudo npm install chromedriver@2.27.2 --ignore-scripts

npm install node-sass@npm:sass --ignore-scripts

接著構建結果出現打包問題

通過查看人人開源文檔發現是打包命令不對，重新修改構建shell

# 在執行過程中若遇到使用了未定義的變量或命令返回值為非零，將直接報錯退出
set -eu
echo "<-------------------------------------->"
echo "安裝chromedriver和node-sass依賴"
sudo npm install chromedriver@2.27.2 --ignore-scripts
npm install node-sass@npm:sass --ignore-scripts
echo "安裝依賴"
sudo npm installecho "<-------------------------------------->"
echo "打包出dist文件夾"
sudo npm run build --prod# 先刪除nginx下的舊數據
sudo rm -rf /home/soft/nginx-1.28.0/html/*
# 再將新數據拷貝到nginx下 -r 拷貝子文件
sudo cp -r dist/* /home/soft/nginx-1.28.0/html/
# 先停止nginx
#sudo /usr/local/nginx/sbin/nginx -s stop
# 在啟動nginx
#sudo /usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf

修改后接著構建

構建成功，瀏覽器訪問

---

總結

以上就是今天要講的內容，本文介紹了使用jenkins部署前端vue項目的方法和步驟，以及使用過程中遇到問題的解決方案。