首页 > 其他分享 >使用jenkins一键打包发布vue项目

使用jenkins一键打包发布vue项目

时间:2023-04-04 17:03:07浏览次数:57  
标签:插件 vue 界面 一键 如下 点击 jenkins 安装

jenkins的安装

Jenkins是一款开源 CI&CD 软件,用于自动化各种任务,包括构建、测试和部署软件。

Jenkins 支持各种运行方式,可通过系统包、Docker 或者通过一个独立的 Java 程序。

安装

这里的操作系统为WSL Ubuntu,其它系统的安装的请参考jenkins官方文档

wget -q -O - https://pkg.jenkins.io/debian/jenkins.io.key | sudo apt-key add -
sudo sh -c 'echo deb http://pkg.jenkins.io/debian-stable binary/ > /etc/apt/sources.list.d/jenkins.list'
sudo apt-get update
sudo apt-get install jenkins

更换端口号(默认运行在8080端口)

jenkins的配置文件在 /etc/default/jenkins;在其中找到HTTP-PORT并修改

使用jenkins一键打包发布vue项目_vue

运行

sudo systemctl start jenkins
# OR
sudo service jenkins start

如果要开机自动运行

sudo systemctl enable jenkins

如果运行时碰到如下图的错误,请先安装jdk

使用jenkins一键打包发布vue项目_vue_02

基础配置

启动成功后输入对应的地址(ip:port)进入jenkins管理界面-如下图

使用jenkins一键打包发布vue项目_vue_03

上图中红色字体对应的文件中拿到默认的管理员密码-具体命令

cat /var/lib/jenkins/secrets/initialAdminPassword

命令执行完成后返回如下图

使用jenkins一键打包发布vue项目_devops_04

输入密码之后进入到自定义Jenkins界面(如下图)

使用jenkins一键打包发布vue项目_js插件_05

在此界面我们选择安装推荐的插件就会开始安装插件;如下图

使用jenkins一键打包发布vue项目_devops_06

插件安装完成后就会自动进入设置用户名密码界面(如下图)

使用jenkins一键打包发布vue项目_Jenkins_07

输入完成后点击按钮保存并完成就会进入下一个界面实例配置

使用jenkins一键打包发布vue项目_Jenkins_08

点击按钮保存并完成就进入一个新界面,再点击其中的按钮开始使用Jenkins就进入了jenkins的主界面(如下图),至此就完成了jenkins的安装与基础配置。

使用jenkins一键打包发布vue项目_js插件_09

发布vue项目

> 打包vue项目需要nodejs,打包完成后需要通过ssh把打包好的文件上传到目标服务器上。所以下面我们将会来安装jenkins的nodejs插件和Publish Over SSH插件。

安装插件-nodejs

在jenkins主界面工作台,依次点击系统管理>插件管理进入插件管理界面(如下图)

使用jenkins一键打包发布vue项目_jenkins_10

搜索结果如下图

使用jenkins一键打包发布vue项目_devops_11

勾选完插件并点击安装后进入到插件下载界面(如下图)

使用jenkins一键打包发布vue项目_js插件_12

配置nodejs插件

在jenkins主界面工作台,依次点击系统管理>全局工具设置进入插件管理界面并找到NodeJs选项(如下图)

使用jenkins一键打包发布vue项目_js插件_13

安装Publish Over SSH插件并配置

Publish Over SSH插件的安装和nodejs插件是一样,安装完成后开始配置插件;

在jenkins主界面工作台,依次点击系统管理>系统配置进入插件配置界面,滚动到Publish over SSH的位置,然后点击SSH Servers下面的新增按钮(如下图)

使用jenkins一键打包发布vue项目_jenkins_14


点击按钮高级后出现的界面如下

使用jenkins一键打包发布vue项目_vue_15

创建任务

至此,打包vue所需的jenkins插件都已经安装完成,下面我们开始创建vue项目打包的任务。

具体操作如下图

使用jenkins一键打包发布vue项目_vue_16

点击按钮确定后,如下图

使用jenkins一键打包发布vue项目_Jenkins_17

安装上图所说的配置完成后点击保存按钮就会跳转到所创建任务的详情界面。

使用jenkins一键打包发布vue项目_Jenkins_18

至此一个我们便实现了一个简单的一键打包前端项目的jenkins配置。

如有疏漏,欢迎指出
您的点赞就是对我最大的认可。



标签:插件,vue,界面,一键,如下,点击,jenkins,安装
From: https://blog.51cto.com/jikun/6169049

相关文章

  • vue 之 computed方法自带缓存踩坑1
    使用场景:ant-vue穿梭框使用页面使用computed方法处理组织结构数据,退出页面时,对加载数据做了setnull操作,再次进入页面时,穿梭框只显示数据,无法做左右穿梭功能。原因:computed方法在页面初始化时执行,且只执行一次,并会将方法内的数据进行缓存。退出页面做了数据清除工作,但并为清楚......
  • 项目实践后的图片压缩完整使用过程【vue3+js】
    van-uploader+图片压缩+图片base64转成file compressImage.jsconstACCEPT=['image/jpg','image/png','image/jpeg']constMAXSIZE=1024*1024*2;constMAXTIP="4"//压缩算法函数/*1.首先拿到了base64的图片字符串2.创建一个image对象,获......
  • VUE watch监听器的基本使用方法详解
    1、下面代码是watch的一种简单的用法<divid="app"><inputtype="text"v-model="firstName"/></div><scriptsrc="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>......
  • jenkins视图权限管理
    插件安装         创建用户角色            创建项目权限     注意:这里强调下它所匹配的不是视图的名字,而是项目的名字。项目就是流水线          角色分配          ......
  • vue 常用动画
    来源: https://juejin.cn/post/6844903638402334734Vue常用transition动画效果记录我的代码果然有问题2018年07月15日13:48 ·  阅读3839先简单介绍下transition标签的使用方法主要用于v-show,v-if或router-view的进出场动画模板<transitionn......
  • vue第三课:简单点击器应用
    简单需求:1,最小为0,小于0则不能再点击减少,并显示提示2,最大值为10,小于10则可以点击增加,超过10则不能再点击,并显示提示<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>v-html测试</title><scriptsrc="vue.js"></script>......
  • vue第二课:常用标签
    1,v-text指令 <divid='app'><h2v-text="message+'???'"></h2><h2v-text="info"></h2><h2>{{message+'??'}}江苏</h2></div><script>Vue.co......
  • vue侦听器
    侦听data里的数据变化:方法格式:<script>  constvm=newVue({    el:"#app",    data:{      username:"张三",      userList:[        {"id":1,"name":"张三"},        {"i......
  • VSCode打开Vue项目
    打开VSCode                                                                       打开文件夹并选择vue的文件夹  ......
  • 4.15 vue中watch computed
    在Vue.js中,computed是一种计算属性,它能够根据依赖的数据动态计算出一个新的值。computed属性可以定义为一个函数,该函数返回需要计算的值。当它所依赖的数据发生变化时,Vue.js会自动重新计算这个值并将其更新到组件上。与computed对应的还有另外两种常见的属性,分别是meth......