iis服务器助手广告广告
返回顶部
首页 > 资讯 > 精选 >如何使用jenkins一键打包发布vue项目
  • 133
分享到

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

2023-06-15 01:06:09 133人浏览 安东尼
摘要

这篇文章主要介绍如何使用jenkins一键打包发布Vue项目,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!jenkins的安装Jenkins是一款开源 CI&CD 软件,用于自动化各种任务,包括构建、测试和部

这篇文章主要介绍如何使用jenkins一键打包发布Vue项目,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

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 updatesudo apt-get install jenkins

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

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

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

运行

sudo systemctl start jenkins# ORsudo service jenkins start

如果要开机自动运行

sudo systemctl enable jenkins

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

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

基础配置

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

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

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

cat /var/lib/jenkins/secrets/initialAdminPassWord

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

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

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

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

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

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

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

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

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

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

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

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

发布vue项目

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

安装插件-nodejs

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

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

搜索结果如下图

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

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

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

配置nodejs插件

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

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

安装Publish Over SSH插件并配置

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

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

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

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

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

创建任务

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

具体操作如下图

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

点击按钮确定后,如下图

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

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

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

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

以上是“如何使用jenkins一键打包发布vue项目”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注编程网精选频道!

--结束END--

本文标题: 如何使用jenkins一键打包发布vue项目

本文链接: https://www.lsjlt.com/news/276283.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 如何使用jenkins一键打包发布vue项目
    这篇文章主要介绍如何使用jenkins一键打包发布vue项目,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!jenkins的安装Jenkins是一款开源 CI&CD 软件,用于自动化各种任务,包括构建、测试和部...
    99+
    2023-06-15
  • 使用jenkins一键打包发布vue项目的实现
    目录jenkins的安装安装更换端口号(默认运行在8080端口)基础配置发布vue项目安装插件-nodejs配置nodejs插件创建任务jenkins的安装 Jenkins是一款开源...
    99+
    2024-04-02
  • vue项目如何打包发布上线
    这篇文章将为大家详细讲解有关vue项目如何打包发布上线,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。一、开发环境到生产环境的转变项目开发结束之后,首先我们需要通知后端,获取一个线上的路径,之后将之前的开发...
    99+
    2023-06-25
  • docker封装vue项目并使用jenkins发布
    vue项目可以打一个dist静态资源包,直接使用Nginx发布即可。现在由于要上docker,需要将vue项目和nginx打成一个镜像才行。 项目结构如下:./ ├── build │   ...
    99+
    2023-01-31
    项目 docker vue
  • 如何使用Docker部署打包发布springboot项目
    这篇文章将为大家详细讲解有关如何使用Docker部署打包发布springboot项目,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。前言从安装docker到多种方式打包发布,编译,镜像,容器等问题,遇到种种...
    99+
    2023-06-29
  • Jenkins一键打包如何部署SpringBoot应用
    小编给大家分享一下Jenkins一键打包如何部署SpringBoot应用,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!Jenkins简介Jenkins是开源CI&...
    99+
    2023-06-22
  • 使用Docker部署打包发布springboot项目
    目录前言第一:环境第二:开始描述从搞项目到docker发布:第四:各种错误教训集合。前言 从安装docker到多种方式打包发布,编译,镜像,容器等问题,遇到种种问题,终于不负所望,一...
    99+
    2024-04-02
  • docker封装nuxt项目使用jenkins发布
    vue项目可以打一个dist静态资源包,直接使用Nginx发布即可。但是nuxt项目无法像vue那样,可以打一个dist静态资源包。需要安装Node.js,并使用npm install 安装依赖包才行。 现在由于要上docker,...
    99+
    2023-01-31
    项目 docker nuxt
  • Jenkins配置maven项目之打包、部署、发布的全过程
    Jenkins和项目在两台服务器上 Jenkins的下载安装部署省略,可自行上官网。 1.安装maven插件 完成后,会出现“success”,并且勾选&...
    99+
    2024-04-02
  • electron如何打包vue项目
    这篇文章主要介绍electron如何打包vue项目,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!创建项目添加electron-builder在项目目录下运行命令:vue add electron-builder2、e...
    99+
    2023-06-29
  • vue项目打包发布上线的方法步骤
    目录一、开发环境到生产环境的转变二、设置统一的请求路径 三、运行打包命令vue项目开发完成后,我们需要将项目打包上线,同时我们希望可以在本地预览生产环境项目 (以vue-c...
    99+
    2024-04-02
  • 如何使用HBuilderX把vue项目打包成apk
    目录1. 下载HBuilderX2. 安装HBuilderX3. 在vscode中打包vue项目3.1 在打包vue项目之前3.2 执行打包命令4. 在HBuilderX中打包apk...
    99+
    2024-04-02
  • vue项目打包后如何通过百度BAE发布到网上
    小编给大家分享一下vue项目打包后如何通过百度BAE发布到网上,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!具体的步骤:1,首先...
    99+
    2024-04-02
  • Vue项目如何优化打包
    这篇文章主要为大家展示了“Vue项目如何优化打包”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“Vue项目如何优化打包”这篇文章吧。一、路由懒加载1.为什么需要路由懒加载当刚运行项目的时候,发现刚...
    99+
    2023-06-25
  • webpack+vue-cli项目如何打包
    小编给大家分享一下webpack+vue-cli项目如何打包,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!1.设置config文...
    99+
    2024-04-02
  • Vue项目打包并发布的完整步骤记录
    目录1、安装部署Nginx服务器。(类似Tomcat服务器)2、Vue项目打包。总结如何将Vue项目打包并发布?我这边是测试发布到本地,不过步骤是一样的,步骤如下: 1、安装部署Ng...
    99+
    2024-04-02
  • 如何使用vue-cli创建项目并webpack打包
    这篇文章主要介绍“如何使用vue-cli创建项目并webpack打包”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“如何使用vue-cli创建项目并webpack打包...
    99+
    2024-04-02
  • 如何使用eclipse打包Maven项目
    小编给大家分享一下如何使用eclipse打包Maven项目,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!Maven中最重要的是POM文件,其打包也是基于该文件的,...
    99+
    2023-06-29
  • IDEA2021.2配置docker如何将springboot项目打成镜像一键发布部署
    之前博客已经谈到配置docker远程链接服务,这里再介绍如何在IDEA中配置docker,将项目部署到服务器上 前文 Docker之开启远程访问的实现 idea2021激活教程 ht...
    99+
    2024-04-02
  • SpringBoot项目如何引入外部jar及将外部jar打包到项目发布jar包
    1、创建一个SpringBoot项目 下载项目之后将项目导入IDEA 2、如何添加外部jar包 准备一个外部的jar包, 我这里使用的是guava-31.1-jre.jar作为演示 下载地址:htt...
    99+
    2023-10-25
    spring boot jar java
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作