一、首先安装jenkins和gitLab（可自行百度查看如何安装jenkins和gitLab），并在jenkins所在服务器安装vue项目打包所需工具，包括node.js；vue-cli脚手架，webpack工具，还需在jenkins服务器安装git工具用于进行git项目下载。

安装内容：

1、vue部分：

(1)Node.js（安装完成后检查node和npm版本是否已安装完成，命令node -v）

(2)安装cnpm

（命令：npm install -g cnpm --registry=http://registry.npm.taobao.org ）

(3)安装vue-cli；（命令：npm install -g @vue/cli）

(4)安装webpack；（命令：cnpm install -g webpack）

2、git部分：

(1)下载git并安装，安装完成后在命令窗口中查看是否安装完成；

（命令：git version;显示git版本即表示安装完成；）

 

二、进行jenkins插件安装

登录jenkins，系统管理-管理插件

 

选择可选插件，在过滤中查询gitLab、nodejs、build等关键信息，下载并安装以下插件：

GitLab Plugin ;

Gitlab Hook Plugin ;

NodeJS ;

Build Authorization Token Root Plugin ;

其中gitLab plugin用于jenkins连接gitLab项目，gitlab Hook plugin和Build Authorization Token

Root Plugin用于进行gitLab变动后jenkins自动进行任务部署；NodeJs 用于jenkins进行vue项目打包；

 

三、进行全局工具配置

系统管理-全局工具配置

1、git配置

找到Git配置，在命令窗口中输入where git 返回的路径即为git安装地址，将该地址复制到Path to Git executable中（记得去除.exe后缀）

 

2、NodeJs配置

找到NodeJs，点击NodeJs安装

别名自取，用于标识，version选择jenkins服务器中安装的nodeJs版本（可通过命令node -v进行查看，必须选择你安装的版本，不然打包时会出现错误）

 

四、进行系统设置

系统管理-系统设置中找到Gitlab,在此次添加gitLab许可证

connection name 中添加标识名，gitlab host URL中添加gitlab服务器地址（例：若你使用的git项目地址是http://172.16.0.11:10086/njfgs/ptz/spcp-vue，则此处添加http://172.16.0.11:10086/），然后点击add添加按钮添加token；在弹出窗口中kind选择gitLab API token，API token中输入gitLab中获取的token api内容。

gitLab中tokenApi获取方式：

1、注册专用gitLab用户或使用已有用户（该用户需要拥有你需要打包项目的上传下载权限），然后点击用户设置，选择访问令牌

姓名输入当前用户名，时间选择你允许jenkins连接gitLab的时间（如图即为允许jenkins连接gitLab知道2019年5月2日），然后勾选下方权限并点击create按钮

完成后可获取到token，复制该值并粘贴到jenkins的配置中；点击add添加完成后在credentials中选择刚才添加的token，并点击test connection测试是否能够连接，若报错则根据报错信息进行相关配置修改。直至连接成功。

五、进行项目正式配置

新建一个自由风格的项目

1、在源码管理中选择git，在下方配置repositories中url中输入你需要打包项目的gitlab路径（若jenkins服务器未安装git则会报错，若安装完成依旧报错先不处理，等先添加credentials后一般会自动消失），点击credentials后方add按钮，添加gitlab用户名密码用于进行项目下载上传

添加后选择刚添加的用户

在下方branches to build中输入你想下载打包的git分支，若为主线则不动默认，若为分支则改为你的分支；

 

2、若需要gitLab项目有变动自动执行jenkins部署则进行该项配置，若不需要则跳过；

选择构建触发器，选择Build when a change is pushed to GitLab；点击高级后allowed branches选择Allow all branches to trigger this job，点击下方secret token后方generate按钮，生成一串id

复制该id，然后到gitLb，用拥有该项目设置权限用户登录，选择设置-导入所有仓库，在URL中输入下图红框中的路径，

secret token中输入上面复制的生成的id，trigger中选择push events，记得取消选择enable ssl verification，然后点击add webhook；

若出现错误提示url is blocked Requests to the local network are not allowed；即表示该gitlab无法向本地进行传输，需要用gitlab管理员用户配置权限，在用户设置中-outbound requests中选中allow requests to the local network from hooks and services

 

修改完成后重新添加webhook，直到下方出现

表示配置完成。

3、若需要进行vue项目打包则进行本项配置，若不需要则跳过

选中构建环境，选中Provide Node & npm bin/ folder to PATH ，下方NodeJS Installation选中之前在全局配置中配置的nodejs

4、选中构建

依次添加你需要的命令

1、cd /d D:\jenkins\workspace\13SPCP_VUE

（跳转到jenkins仓库中本项目路径中）

2、npm run build

（若该前端vue项目中尚无node-modules，则需先进行npm i 下载插件）

（注：若需执行npm命令，则需要在上方构建环境中选择nodejs，及进行上方3号操作）

3、cd /d D:\nginx-frp-19019\html

if exist spcpVue rd spcpVue /s /q

（跳转到nginx中，判断前端项目是否已存在，已存在删除；目的：为了进行前端项目打包后部署）

4、XCOPY D:\jenkins\workspace\13SPCP_VUE\dist/E D:\nginx-frp-19019\html\spcpVue\

（将build完后的dist包复制到nginx中html中，其中 /E表示复制文件夹下方所有内容包括空文件夹）

 

自此，配置完成！