Jenkins自动化构建Vue项目的实践

简介: 在现代的Web开发中,Vue.js已经成为一种非常流行的JavaScript框架。为了更高效地管理和部署Vue.js项目,使用自动化构建工具是至关重要的。Jenkins作为一款强大的持续集成和持续部署(CI/CD)工具,为我们提供了一种便捷的方式来自动化构建Vue.js项目。本文将介绍如何在Jenkins中配置和使用自动化构建Vue.js项目的步骤。

在现代的Web开发中,Vue.js已经成为一种非常流行的JavaScript框架。为了更高效地管理和部署Vue.js项目,使用自动化构建工具是至关重要的。Jenkins作为一款强大的持续集成和持续部署(CI/CD)工具,为我们提供了一种便捷的方式来自动化构建Vue.js项目。本文将介绍如何在Jenkins中配置和使用自动化构建Vue.js项目的步骤。

jenkins-vue.jpg

步骤一:配置Jenkins环境

首先,确保你已经在服务器上安装了Jenkins。没有安装的家人们可以参考我们之前的文章Jenkins简介及Docker Compose部署。确保Jenkins已经配置了Git和Node。

步骤二:创建Jenkins任务

  • 创建任务

在Jenkins首页,点击New Item来创建一个新的任务。填写任务名称,选择Freestyle project并点OK

_20231203204149.jpg

  • 配置git仓库地址

在任务配置页面中,找到Source Code Management部分,选择Git,并填写Vue.js项目的仓库地址。如果采用的是http协议的话还需要配置git仓库的凭证。(我此处仓库用的是阿里云的云效)

_20231203204626.jpg

  • 构建触发配置

Build Triggers部分,选择配置构建触发规则。我这个项目构建不是很频繁,每次我提交完代码需要部署的时候都是手动点击立即构建来手动触发的,所以在这块没有配置构建触发的策略。

_20231203210113.jpg

  • 配置构建脚本

Build部分,点击Add build step并选择Execute shell,在其中填写构建脚本,例如:

echo "=====================start build  blog============="

pwd && ls -l

npm install -g yarn

/home/node/bin/yarn install

/home/node/bin/yarn docs:build

pwd && ls -l

expect -c '
    spawn sh -c "scp -r /var/jenkins_home/workspace/blog/docs/.vuepress/dist/\* xiuji@192.168.10.106:/home/xiuji/docker/vuepress/html"
    expect {
        "password" {set timeout 20; send "123456\r"; exp_continue;}
    }
    expect eof'

echo "=====end build  blog======"
AI 代码解读

我们在这个脚本中,在项目路径下先安装了yarn,然后通过yarn install 下载依赖包,下载完成之后执行构建命令,最后将构建好的dist中的文件复制到ng中,我们就通过执行这个脚本完成了vue项目的构建与部署。

步骤三:触发构建

我这个项目没有配置构建触发规则,每次需要部署的时候都是在任务页面点击Build Now 来手动触发构建部署的。

点击之后也可以在构建历史页面查看控制台输出,来跟踪我们构建部署的实时执行状态。

_20231203210701.jpg

构建输出

_20231203210817.jpg

总结

通过以上步骤,你已经成功配置了Jenkins用于自动化构建Vue.js项目。每当有新的代码提交或者按照定时任务,Jenkins都将自动拉取最新代码,执行构建过程,使得部署过程更加高效和可靠。这种CI/CD的实践有助于提高开发团队的生产力,确保项目的稳定性和可维护性。

希望这篇文章对你在Jenkins中自动化构建Vue.js项目的实践有所帮助!如果你有任何问题或者建议,欢迎在评论区留言。

Jenkins自动化构建Vue项目的实践

目录
打赏
0
1
1
1
182
分享
相关文章
【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
109 13
【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
85 14
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
74 11
【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
92 13
【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
Ansible与Jenkins:自动化工具的对比
Ansible和Jenkins是自动化领域的两大巨头。Ansible专注于配置管理和任务自动化,采用无代理架构,使用YAML定义配置,具有幂等性和可扩展性。Jenkins则擅长持续集成和持续交付(CI/CD),支持丰富的插件生态系统,适用于自动化构建、测试和部署。两者各有优势,Ansible适合配置管理与大规模部署,Jenkins则在CI/CD方面表现出色。结合使用可创建更强大的自动化工作流,提升团队生产力和软件质量。选择工具时应根据具体需求决定。
ry-vue-flowable-xg:震撼来袭!这款基于 Vue 和 Flowable 的企业级工程项目管理项目,你绝不能错过
基于 Vue 和 Flowable 的企业级工程项目管理平台,免费开源且高度定制化。它覆盖投标管理、进度控制、财务核算等全流程需求,提供流程设计、部署、监控和任务管理等功能,适用于企业办公、生产制造、金融服务等多个场景,助力企业提升效率与竞争力。
83 12
LangGraph:构建多代理动态工作流的开源框架,支持人工干预、循环、持久性等复杂工作流自动化
LangGraph 是一个基于图结构的开源框架,专为构建状态化、多代理系统设计,支持循环、持久性和人工干预,适用于复杂的工作流自动化。
163 12
LangGraph:构建多代理动态工作流的开源框架,支持人工干预、循环、持久性等复杂工作流自动化
创建vue3项目步骤以及安装第三方插件步骤【保姆级教程】
这是一篇关于创建Vue项目的详细指南,涵盖从环境搭建到项目部署的全过程。
255 1
Agent-E:基于 AutoGen 代理框架构建的 AI 浏览器自动化系统
Agent-E 是一个基于 AutoGen 代理框架构建的智能自动化系统,专注于浏览器内的自动化操作。它能够执行多种复杂任务,如填写表单、搜索和排序电商产品、定位网页内容等,从而提高在线效率,减少重复劳动。本文将详细介绍 Agent-E 的功能、技术原理以及如何运行该系统。
259 5
Agent-E:基于 AutoGen 代理框架构建的 AI 浏览器自动化系统

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等