Jenkins 自动构建 vue 前端项目:

平时部署前端项目每次都需要前端人员build打包,然后给后端,后端丢到服务器上,但是这个确实很麻烦,有时候一天得发好多次,很是麻烦,而且出错概率高,所以今天来弄下自动部署 前端项目

jenkins git node ,npm 必须要装(jenkisn安装可以看我之前发的jenkins安装笔记,node 和 npm 安装相对简单,就不做介绍了)

具体思路:jenkins 从git 上检出 前端代码到jenkins 的工作目录,(/var/lib/jenkins/workspace/)然后 npm install,接着npm run build 打包即可,最后 通过 cp 命令将 打包好的静态文件拷贝到nginx 服务器 目录即可

1.jenkins 和 node ,nom 环境都搭好的情况下开业创建项目

jenkins构建vue镜像 jenkins构建vue项目_jenkins构建vue镜像

2.选择代码检出方式

jenkins构建vue镜像 jenkins构建vue项目_git_02


3.上面提到了参数化构建,大家可以使用这个

jenkins构建vue镜像 jenkins构建vue项目_nginx_03

4.选择node 构建

jenkins构建vue镜像 jenkins构建vue项目_服务器_04


5.全局工具 node配置,这个顺序好像有点晚,属于Jenkins环境那环步骤

jenkins构建vue镜像 jenkins构建vue项目_git_05

到这里基本上就完了,就剩执行 shell 脚本,npm install ,build ,然后拷贝文件到nginx 服务器

具体看下图

jenkins构建vue镜像 jenkins构建vue项目_服务器_06

下面我贴上脚本

这是我的 项目名称 和 拷贝路径,你根据自己情况更改脚本

注意!要知道 jenkins 的工作目录是在/var/lib/jenkins/workspace/
也就是说,你从git上拉下来的代码,会在这个目录下,那么也就是从这个目录拷贝静态文件到你 web 服务器目录即可,比如 nginx ,tomcat 等相关目录下即可

cd /var/lib/jenkins/workspace/feynman-village-admin &&  npm install && npm run build && cp -r /var/lib/jenkins/workspace/feynman-village-admin/dist/* /usr/local/nginx/html/zhicun/admin/

到这里就结束了,总体来讲还是很简单的,比部署java 环境 难多了。
当然 我在实践还是出了一些错误,不过都是 npm 包 版本问题,百度可以解决,不行就更换package.json 中的 依赖版本,
注意!!出现依赖错误,最好修改后,直接删除node.modes 文件夹。然后重新npm install