一： general

• 这部分不需要配置，输入个项目描述就可以
  

二： 源代码管理

• 这里我使用的是Git， 需要配置Git的仓库路径和自己的账号密码
• 底下的Branch Specifier 选择仓库的分支， 在这里我选的是主分支 master
  

三： 构建触发器

• vue项目不需要这个东西， 可以直接略过

四： 构建环境

• 这里是很重要的，需要在jenkins 安装机器上 安装nodejs才会在构建环境中显示Provide Node & npm bin/ folder to PATH这个选项
  

五： 构建

• 因为vue项目需要打包，所以我们需要使用执行shell命令来进行操作
  

cd /var/lib/jenkins/workspace/yrcms  #--进入jenkins workspace的项目目录
npm install chromedriver --chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver #-- 这里是下载chromedriver 没有这个会报错
#npm config set registry=http://registry.npm.taobao.org  #--镜像选择淘宝的镜像
#npm info underscore #--（如果上面配置正确这个命令会有字符串response）
npm install #-- 下载依赖包
npm run build #-- 开始打包
cd dist
rm -rf yrcms.tar.gz  #-- 删除上次打包生成的压缩文件
tar -zcvf yrcms.tar.gz *  #-- 把生成的项目打包成yrcms方便传输到远程服务器
cd ../

• 在这里已经完成了 项目的打包， 接下来就是将项目打包后的文件上传到对应的位置了

六： 构建后操作

• 我是用的SSH进行传输文件的， 这个也需要提前安装在jenkins的那台机器上

• 在配置SSH Server之前要先去jenkins 的配置中先配置一个SSH 连接
  

• 上传的源文件,vue项目打包后都在dist里面,这里这里是接着上一步来的source files：

dist/yrcms.tar.gz

• 删除前缀 Remove prefix：

/dist

• 远程目录 Remote directory：

/usr/local/nginx/html/work/

• 执行对话 Exec command：

cd /usr/local/nginx/html/work/  #进入远程服务器的目录
tar -zxvf yrcms.tar.gz -C cms/ #解压yrcms文件到cms文件夹
rm -rf yrcms.tar.gz #删除yrcms文件

觉得有用就点个赞吧!