目錄
前言：
1.jenkins配置參數(shù)
2.構(gòu)建前端代碼腳本
3.額外補(bǔ)充相關(guān)配置
前言：
服務(wù)器，已部署nginx和jenkisn和npm，在此基礎(chǔ)上部署前端項(xiàng)目，
后續(xù)補(bǔ)充相關(guān)nginx等服務(wù)器安裝操作；
1.jenkins配置參數(shù)
1.新增一個(gè)軟件項(xiàng)目
?2.新增項(xiàng)目描述
3.配置歷史鏡像處理規(guī)則
例如：一個(gè)構(gòu)建任務(wù)最多保留30天，最多保留10個(gè)構(gòu)建任務(wù)
?4.配置項(xiàng)目構(gòu)建目標(biāo)服務(wù)器
?5.配置前端代碼地址，以及構(gòu)建的分支
?6.配置前端代碼存放地
7.配置前端編譯代碼腳本路徑
配置臨時(shí)變量，以及執(zhí)行目標(biāo)路徑下的腳本，進(jìn)行編譯前端代碼
?
?文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-694069.html
2.構(gòu)建前端代碼腳本
#!/bin/bash
#1打包前端
echo "package demoWeb..."
#前端代碼存放地
cd /app/autopackage/demo/dev/code/demo
#借助npm實(shí)現(xiàn)拉取、構(gòu)建等
export nodejieba_binary_host_mirror=http://前端部署服務(wù)器ip/npm/nodejieba/
#信任非http連接,配置node所在路徑
NODE_DIR=/app/autopackage/pck_env/node14/bin
#清楚緩存
$NODE_DIR/npm cache clean --force
$NODE_DIR/node $$NODE_DIR/npm config set unsafe-perm=true
$NODE_DIR/node $NODE_DIR/npm fund
$NODE_DIR/node $NODE_DIR/npm run build
echo "package demoWeb...end"
3.額外補(bǔ)充相關(guān)配置
1.如果構(gòu)建失敗或者提示node相關(guān)問(wèn)題，可在代碼所在位置配置node_modules
2.查看npm配置路徑
npm config get prefix
3.查看nodehe npm版本
node -v
npm -v
4.查找nodel modul路徑
npm root -g
npm bin -g
5.升級(jí)node
npm install -g -n
或者安裝
npm install
6.nginx 配置相應(yīng)端口號(hào)映射編譯代碼
主要新增一個(gè)nginx文件
主要配置server如下：
server{
? ? ? ? listen 9091;#外部訪問(wèn)端口
? ? ? ? server_name localhost；
? ? ? ? location /{
? ? ? ? ? ? ? ? root? /app/autopackage/demp/code/demo/dist/project;#前端編譯代碼所在地
? ? ? ? ? ? ? ? index index.html;#前端首頁(yè)
? ? ? ? ? ? ? ? try_files $uri $url/ /app/autopackage/demp/code/demo/dist/project/index.html;#報(bào)錯(cuò)找不到頁(yè)面404可加載此配置
????????}
}
?
?文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-694069.html
?可參考文章nginx配置
?
?
到了這里，關(guān)于jenkins構(gòu)建前端vue項(xiàng)目的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
