jenkins自动构建前端项目(window,vue)
2021/9/25 6:40:59
本文主要是介绍jenkins自动构建前端项目(window,vue),对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
我们把一个多人协作的vue前端项目发布服务器,一般要经过以下步骤:
- git更新最新的代码
- 构建项目
- 把构建后的代码上传到服务器
如果用jenkins来构建的话,只需要点击一次构建按钮,就可以自动完成以上的步骤了,而且根据需求,可以实现更多的功能。
1.下载安装jenkin
1.1 java环境
jenkins需要运行在Java的环境中,所以前提是需要先安装jdk,测试jdk是否安装好,在命令行输入:java -version
1.2 下载jenkins
下载地址 jenkins下载
下载后点击安装,默认端口是8080,然后打开 http://localhost:8080/
,会出现如下页面:
根据提示,输入管理员密码,,然后安装推荐插件,等待安装完毕后,然后设置登录的用户名和密码,就可以进入jenkins的页面了:
2 配置
2.1 配置远程服务器环境
首先下载插件publish over ssh:
- 进入系统管理,然后点击插件管理
- 搜索插件,并安装
- 进入系统配置,配置远程服务器
- 配置远程服务器
- 点击右下角
test configuration
按钮,测试配置
2.3 配置node环境
- 安装插件
nodejs plugin
- 配置添加node版本,点击
global tool configuration
- 添加node版本
3 构建
一些必要的插件安装配置过后,就可以开始构建项目了
3.1 新建项目
- 点击新建项目
- 选择项目模板
3.2 源码管理
- 滚动页面到
源码管理
配置项,选择git
,此配置目的是自动从远程拉取代码,
其中URL就是项目的git的地址,credentials是git登录凭据,还可以指定项目分支,
其中credentials如果是第一次的话,需要点击添加
完成配置后,才能选择:
3.3 构建环境配置
我们这里是vue项目,所以选择node环境,并选择2.3配置node环境
所配置的node版本:
3.4 构建
这一步jenkins会依次执行我们所配置的脚本,
- 用脚本构建项目
选择execute windows batch command
,这里面就可以添加脚本,像在命令行一样
- 上传至服务器
点击增加构建步骤
,然后选择send files or execute commands over ssh
其中当前项目目录,如果没有更改过的话,默认在C:\Windows\System32\config\systemprofile\AppData\Local\Jenkins\.jenkins\workspace\项目名称
3.5 验证自动构建
- 开始构建
经过以上的配置,就已经配置好了一个jenkins项目了,返回到首页,就会有一个项目,点击构建按钮,就可以自动构建了
- 构建历史
点击项目名称,就可以进入到项目详情页,然后左下角会有构建历史,点击构建历史,就可以查看每次构建的控制台输出情况:
控制台输出的信息:
这样一个最基本的vue项目的持续构建就完成啦,不需要再手动构建项目,手动上传到服务器。
这篇关于jenkins自动构建前端项目(window,vue)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-12-21Vue3教程:新手入门到实践应用
- 2024-12-21VueRouter4教程:从入门到实践
- 2024-12-20Vue3项目实战:从入门到上手
- 2024-12-20Vue3项目实战:新手入门教程
- 2024-12-20VueRouter4项目实战:新手入门教程
- 2024-12-20如何实现JDBC和jsp的关系?-icode9专业技术文章分享
- 2024-12-20Vue项目中实现TagsView标签栏导航的简单教程
- 2024-12-20Vue3入门教程:从零开始搭建你的第一个Vue3项目
- 2024-12-20从零开始学习vueRouter4:基础教程
- 2024-12-20Vuex4课程:新手入门到上手实战全攻略