如何使用 Jenkins 打包 Vue 项目

在前几篇的文章中,我们在 Linux 服务器上安装了一些 Jenkins 所需要的基本配置软件,今天我们来实际的操作一遍,如何使用 Jenkins 来完成 Vue 项目的可持续集成,实现自动拉取代码、自动下载依赖、自动打包等操作。

一、新建 Jenkins 任务

点击右边开始创建一个新任务,输入一个任务名称,选择  构建一个自由风格的软件项目

二、设置源码管理

找到源码管理,选择 Git,输入自己 github 的项目地址到  Repository URL  后面,点击 Credentials 后面的 Add ,添加连接 github 的私钥

如果你没有添加过私钥的话,那就选择  Add -- Jenkins  ,新增你的私钥配置

类型选择  SSH Username with private key ,Username 添加你 git 的user.name ,点击 Enter directly,在 Key 里面添加你自己的私钥,输入  cat /root/.ssh/id_rsa  命令查看你的私钥

前提你需要在你的 github 上配置你的公钥,不会的话可以参考我另外一篇文章(如何在 Mac 上配置 Git 环境

默认选中的是 master 分支,你也可以选择你项目中的其他分支,点击保存

三、开始构建

点击右边  立即构建

可以点击  Build History  中的编号,选择  控制台输出 ,查看构建的过程日志

出现  Finished:SUCCESS  这样说明 Jenkins 已经成功从 github 上拉取了代码到 Jenkins 工作区中,这时候需要我们执行 Vue 的打包命令了

四、Jenkins Vue 打包

点击左边的配置,找到构建,点击  增加构建步骤 ,选择  执行 shell 

输入 Vue 的打包命令,点击保存

  1. node -v  #检查Node.js版本号
  2. npm -v  #检查Npm版本号
  3. npm config set registry https://registry.npm.taobao.org  #设置镜像地址为淘宝的Npm镜像地址
  4. npm config get registry  #检查Npm镜像地址
  5. npm install  #下载项目需要的依赖包
  6. npm run build  #执行打包程序

我们再次点击 立即构建、控制台输出,查看项目的打包情况

就这样我们的 Vue 项目就打包成功了,可以在工作区内看到打包后的结果

通过以上步骤,我们就成功的打包了一个 Vue 的项目~~~

博主只是一名前端的小白,只是把自己用到的知识分享一下,要是有什么不对的地方,欢迎大家提出~~

继续阅读
Admin
  • 本文由 发表于 2018年11月11日19:31:48
  • 除非特殊声明,本站文章均为原创,转载请务必保留本文链接
CentOS 7 安装MongoDB 4.0 操作系统

CentOS 7 安装MongoDB 4.0

MongoDB 是由C++语言编写的,是一个基于分布式文件存储的开源数据库系统,在高负载的情况下添加更多的节点,可以保证服务器性能。MongoDB 旨在为 WEB 应用提供可扩展的高性能数据存储解决方...
如何在 Linux 服务器上安装 Maven 操作系统

如何在 Linux 服务器上安装 Maven

Maven是基于项目对象模型(POM project object model),可以通过一小段描述信息(配置)来管理项目的构建,报告和文档的软件项目管理工具,目前有很多的 Java 项目使用 Mav...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: