Jenkins 搭建两种风格 Web 前端 vue 工程

Jenkins 搭建两种风格 Web 前端 vue 工程

下图是 Vue 的一个前端工程,代码库目录结构如下所示:

Jenkins 创建个 Freestyle project 的工程,如下图所示:

配置项目仓库,从 GitLab 获取项目仓库路径。

配置 GitLab webhook 触发

选择编译器的 系统环境

工程编译指令脚本

最后点击保存配置,返回工程页面。

点击 Build Now 执行编译任务

执行编译显示如下,先克隆下载项目代码,开始编译就报错了,提示 : npm ERR! code ECONNREFUSEDnpm ERR! errno ECONNREFUSED 错误。

npm ERR! If you are behind a proxy, please make sure that the
npm ERR! ‘proxy’ config is set properly. See: ‘npm help config’

说明我的系统无法编译 Web 前端的 vue 工程,先检查系统,发现就没有安装 node 编译解析器。

那就先下载安装工具,配置好环境。

下载好工具,解压文件。

解压到自己指定的目录下

然后在配置系统环境变量,修改 /etc/profile 文件,添加如下几行配置:

系统环境变量配置好,执行 source /etc/profile ,然后再查看一下安装的版本信息,是否正确。

好了, 编译工具安装配置完成,下面再次执行编译。

可以看到,Jenkins 已经可以顺利执行编译了,编译需要点时间,喝杯咖啡等着工程打包发布。

上面是创建的 Freestyle project 的工程,下面在创建个 pipeline 风格的工程,继续跑这个项目。

接着进行配置

勾选 This project is parameterized 选项

继续选择添加 String Parameter 选项

配置克隆下载项目

pipeline 代码片段如下

保存配置,显示工程页面。

点击 Build with Parameters 开始执行编译

执行 Build

Build

pipeline 执行

编译顺利完成,工程已打包发布了。

上面就是 Jenkins 搭建两种风格 Web 前端 vue 工程的过程,希望对各位有一点帮助,给点个小红心吧。

© 著作权归 万事通 所有