Liunx Jenkins 部署vue项目

1. 准备环境

• 软件	版本号	备注
  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.若继续提示找不到以上模块或插件，请检查版本是否匹配