如何使用 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 的打包命令，点击保存

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

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

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

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