iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >使用jenkins一键打包发布vue项目的实现
  • 663
分享到

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

2024-04-02 19:04:59 663人浏览 薄情痞子
摘要

目录jenkins的安装安装更换端口号(默认运行在8080端口)基础配置发布Vue项目安装插件-nodejs配置nodejs插件创建任务jenkins的安装 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并修改

运行


sudo systemctl start jenkins
# OR
sudo service jenkins start

如果要开机自动运行


sudo systemctl enable jenkins

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

基础配置

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

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


cat /var/lib/jenkins/secrets/initialAdminPassWord

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

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

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

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

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

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

发布vue项目

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

安装插件-nodejs

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

搜索结果如下图

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

配置nodejs插件

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

安装Publish Over SSH插件并配置

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

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


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

创建任务

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

具体操作如下图

点击按钮确定后,如下图

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

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

到此这篇关于使用jenkins一键打包发布vue项目的实现的文章就介绍到这了,更多相关jenkins打包发布vue项目内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: 使用jenkins一键打包发布vue项目的实现

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

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

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

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

下载Word文档
猜你喜欢
  • 使用jenkins一键打包发布vue项目的实现
    目录jenkins的安装安装更换端口号(默认运行在8080端口)基础配置发布vue项目安装插件-nodejs配置nodejs插件创建任务jenkins的安装 Jenkins是一款开源...
    99+
    2024-04-02
  • 如何使用jenkins一键打包发布vue项目
    这篇文章主要介绍如何使用jenkins一键打包发布vue项目,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!jenkins的安装Jenkins是一款开源 CI&CD 软件,用于自动化各种任务,包括构建、测试和部...
    99+
    2023-06-15
  • docker封装vue项目并使用jenkins发布
    vue项目可以打一个dist静态资源包,直接使用Nginx发布即可。现在由于要上docker,需要将vue项目和nginx打成一个镜像才行。 项目结构如下:./ ├── build │   ...
    99+
    2023-01-31
    项目 docker vue
  • vue项目如何打包发布上线
    这篇文章将为大家详细讲解有关vue项目如何打包发布上线,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。一、开发环境到生产环境的转变项目开发结束之后,首先我们需要通知后端,获取一个线上的路径,之后将之前的开发...
    99+
    2023-06-25
  • Jenkins配置maven项目之打包、部署、发布的全过程
    Jenkins和项目在两台服务器上 Jenkins的下载安装部署省略,可自行上官网。 1.安装maven插件 完成后,会出现“success”,并且勾选&...
    99+
    2024-04-02
  • 使用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
  • vue项目打包发布上线的方法步骤
    目录一、开发环境到生产环境的转变二、设置统一的请求路径 三、运行打包命令vue项目开发完成后,我们需要将项目打包上线,同时我们希望可以在本地预览生产环境项目 (以vue-c...
    99+
    2024-04-02
  • Docker使用Git实现Jenkins发布、测试项目的详细流程
    目录一、安装Docker二、创建自定义网络地址三、docker创建容器四、自定义镜像五、配置nginx反向代理六、项目上传到Git仓库七、使用Jenkins发布、测试项目一、安装Do...
    99+
    2024-04-02
  • Vue项目打包并发布的完整步骤记录
    目录1、安装部署Nginx服务器。(类似Tomcat服务器)2、Vue项目打包。总结如何将Vue项目打包并发布?我这边是测试发布到本地,不过步骤是一样的,步骤如下: 1、安装部署Ng...
    99+
    2024-04-02
  • Vue项目部署到jenkins的实现
    目录服务器配置环境配置到jenkins上看看jenkins干了什么服务器配置环境 需要安装yarn命令,但是yarn是通过npm安装的,所以要先安装npm,npm又是node附带的,...
    99+
    2024-04-02
  • 如何使用Docker部署打包发布springboot项目
    这篇文章将为大家详细讲解有关如何使用Docker部署打包发布springboot项目,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。前言从安装docker到多种方式打包发布,编译,镜像,容器等问题,遇到种种...
    99+
    2023-06-29
  • vue项目打包发布后接口报405错误的解决
    目录vue项目打包发布后接口报405vue项目打包之后接口出现错误问题错误信息关键代码解决方式vue项目打包发布后接口报405 vue项目前端做了代理打包后后台不识别报405 not...
    99+
    2024-04-02
  • 使用eclipse打包Maven项目的实现步骤
    Maven中最重要的是POM文件,其打包也是基于该文件的,在POM文件中配置插件,可以实现将Maven项目打包成可执行jar包 依赖如下: <build> <p...
    99+
    2024-04-02
  • 如何实现Vue项目分环境打包
    小编给大家分享一下如何实现Vue项目分环境打包,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!第1步:安装cross-env在项目...
    99+
    2024-04-02
  • vue-cli3配置多项目并按项目分别实现打包
    目录vue-cli3配置多项目并按项目分别打包项目结构vue.config.js相关配置注意最后一步补充:开发环境如何进入不同项目环境总结vue-cli3配置多项目并按项目分别打包 ...
    99+
    2023-01-14
    vue-cli3配置多项目 vue-cli3打包 vue-cli3配置
  • vue项目打包以及优化的实现步骤
    目录vue项目的打包上线及优化vue项目的打包项目托管项目的常见优化vue项目的打包上线及优化 项目完成,我们会将项目进行上线,为了提升性能,我们往往会进行一些优化处理 vue项...
    99+
    2024-04-02
  • vue项目打包部署跨域的实现步骤
    目录1.前端工程解决办法1.1开发时候解决办法1.2打包部署后解决办法2.后端工程解决办法跨源资源共享(CORS,或通俗地译为跨域资源共享)是一种基于 HTTP 头的机制,该机制通过...
    99+
    2023-05-20
    vue 打包部署跨域 vue 打包跨域
  • Vue项目打包部署到GitHubPages的实现步骤
    目录前言前期准备重要说明步骤1步骤2步骤3步骤4步骤5步骤6前言 关于什么是github pages?怎样创建github 仓库上传本地项目到GitHub远程仓库?等基本操作本文不再...
    99+
    2024-04-02
  • Vue 项目的成功发布和部署的实现
    最近一直在尝试对 Vue 项目进行打包和发布,发现通过 npm run build 打包生成的 dist 文件不能直接放到服务器下面进行部署,否则会出现以下问题: 究其原因是,无法...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作