- 准备环境
-
软件
版本号
备注
Jenkins
2.350
JDK
1.8.0_341
oracleJDK
nodeJS
16.17.0
NodeJS Plugin
1.5.1
Liunx用户root
2. 安装 NodeJS Plugin
3. 点击安装 NodeJS Plugin,安装完成后,进入全局设置配置NodeJS,另在/etc/profile配置环境变量
# nodejs
export NODEJS=/usr/local/nodejs
export PATH=$NODEJS/bin:$PATH
环境变量配置完成后,source profile 刷新配置。配置NodeJS完成后可用node -v ,npm -v验证是否成功。
4. 点击新建任务,创一个自由风格的软件项目
5. 创建名为vue_test的项目
6. 配置构建信息
7. 源码管理,此处项目为内部权限项目,因此git地址格式如下:
8. 构建环境
9. 构建脚本,该项目为自由风格,因此需要命令编译,打包。
完整脚本如下
#!/bin/bash
# 定义路径
# jenkins前端工作空间目录
dist_name=/var/lib/jenkins/workspace/vue_test/
# 打包目录名
dist=dist
# 项目目录
project_dir=/car_app/www/html/
# 切换到项目目录打包
echo "*******************npm 开始打包*******************"
cd $dist_name
# 删除旧版本文件
rm -rf package-lock.json
npm install
npm run build
# -d 参数判断$wyPath是否存在
wpath=$dist_name$dist
if [ ! -d "$wpath" ];then
npm run build
fi
echo "*******************npm 打包成功*******************"
echo "*******************将dist包压缩为tar包*******************"
# 切换到打包好的目录文件夹
cd $dist
# 删除历史打包生成的压缩文件
rm -rf dist.tar.gz
tar -zcvf dist.tar.gz *
echo "*******************tar包压缩成功*******************"
echo "*******************tar包复制到项目目录*******************"
# 复制打包好的包的指定目录
cp dist.tar.gz $project_dir
cd $project_dir
tar -xzvf dist.tar.gz
sleep 1
#部署成功并删除tar包
rm -rf dist.tar.gz
echo "*******************部署完成*******************"
10. 点击保存后,即可自动编译,自动部署。
常见问题
1.不能找到vue-cli-service,解决办法全局安装npm install @vue/cli-service -g
2.不能找到postcss-pxtorem,解决办法安装相应版本npm i postcss-pxtorem@5.1.1
3.不能找到babel/cli,解决办法npm install --save-dev @babel/core @babel/cli
4.Cannot find package 'babel-plugin-import',解决办法npm install antd babel-plugin-import --save
5.若继续提示找不到以上模块或插件,请检查版本是否匹配