jenkins配置vue项目

最新推荐文章于 2025-03-29 22:22:06 发布
最新推荐文章于 2025-03-29 22:22:06 发布
阅读量269 收藏
点赞数
分类专栏： 运维 文章标签： linux 运维 jenkins
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_44276988/article/details/114577704
版权

jenkins配置vue项目

一、配置Git

在这里插入图片描述

二、选择node
		选择自己jenkins安装的node
三、构建
cd /var/jenkins_home/workspace/yxshop-ui
rm -rf dist
rm -rf package-lock.json
npm install 
npm run build
cd dist
tar -zcvf yxshop-ui.tar.gz *

如果jenkins是用Docker安装的话 需要远程发送到你的服务器上
在这里插入图片描述

cd  /usr/app/tomcat/webapps
tar -zxvf yxshop-ui.tar.gz -C dist/
rm -rf yxshop-ui.tar.gz
cp -r /usr/app/tomcat/webapps/WEB-INF /usr/app/tomcat/webapps/dist

保存构建

自动化部署—Jenkins集成Vue项目（内网环境版）
IT侠客行的博客
10-10 1338
最近由于公司项目，所有开发和环境都在内网环境下实现，由于内网无法访问外网，我不得已在本地电脑上安装虚拟机VM，装上了CentOS7，在CentOS7下载了相关Jenkins，GitLab，Nginx+Nexus依赖包（rpm方式），前端平台架搭好了要把项目放到服务器运行，但是每次更新网站内容就要手动部署一次，实在很麻烦，于是就想搭建一套自动化部署的服务。看了一些案例最后选用现在比较主流的Jenkins+GitLab+Nginx+Git+Nexus实现CI/CD的方案来搭建。
linux系统jenkins自动化部署vue项目至远程服务器
m0_46536382的博客
04-01 2761
前言 上一篇文章，已经讲解了windows系统使用Jenkins实现自动化部署vue项目，这次又又又花了一天的时间，研究了下linux系统下的操作，其实两者差别不算大，主要是JDK的安装和环境变量的设置稍微麻烦些，还有Jenkins任务构建模块，选择的构建步骤跟windows不一致，其他大致相同。本文还提到小白可能会遇到的错误（踩坑大师），也进行了解决方案的提供，希望能给小伙伴们提供到帮助。 目录前言工具及材料准备1.git2.JDK（Jenkins依赖java环境）3.Jenkins（war包）4.git
jenkins自动部署vue前端项目
08-15
jenkins自动打包vue前后端分离项目，部署到远程服务器
Jenkins部署vue项目
姜翰翰的博客
02-26 1679
从0-1的Jenkins部署vue项目
Jenkins + CICD流程一键自动部署Vue前端项目（保姆级）
最新发布
会变好的 慢一点也没关系
03-29 1145
这里填写的地址就是刚刚jenkins中配置的URL，密码也是刚刚在Jenkins中生成的随机密码。采用docker部署jenkins，注意这里的命令，一定要映射docker路径，否则无法找到(ps:已踩坑)然后配置jenkins中的用户名和密码即可。然后再选择一个执行shell，并且将这个打包的环境执行成为一个镜像。在这里指定一个node的版本号，其它的不用勾选。然后是配置webhook，也是在刚刚的任务配置中配置。配置git仓库地址，然后选择刚刚创建的凭据。以上配置完成后，应用保存，然后执行构建即可。
【Jenkins】部署vue项目（多种方式部署）
热门推荐
怀着一颗学徒的心
07-24 1万+
🥕第一种 （npm run build）打包的形式 🥕第二种 （npm run test）直接启动的形式 🥕第三种 使用docker镜像打包脚本
40、jenkins部署vue项目
qq23001186的博客
08-18 5575
前面我们已经学习了jenkin的持续集成与部署，接下来我们将使用jenkin来部署我们之前已经完成的微服务项目。
Docker结合Jenkins部署vue项目
01-20
Docker结合Jenkins部署vue项目 接上篇 Vue项目没什么好说的，在本地一般...具体填Jenkins配置可以参考我的上一篇文章，这里需要安装一个额外的插件 dockerfile 在前端项目的根目录下添加dockerfile文件，内容如下： #
【Vue】——Jenkins自动打包部署VUE项目
...
10-22 3039
个人理解，Jenkins其实是把我们平时打包部署项目的操作弄成一个流程了，按照我们平时打包部署项目的流程去思考，然后找到对应在Jenkins中如何配置就可以实现基础的打包上传部署。
Jenkins CI/CD自动部署Vue、SpringBoot项目
toyong的博客
09-09 857
Jenkins CI/CD篇Jenkins是一个流行的开源自动化工具，用于实现持续集成（CI）和持续交付（CD）的目标。 使用Jenkins自动部署一个vue项目。使用Jenkins自动部署一个SpringBoot项目
jenkins自动构建部署vue
_binlong的博客
08-09 2902
Jenkins是一个开源的、提供友好操作界面的持续集成(CI)工具，起源于Hudson（Hudson是商用的），主要用于持续、自动的构建/测试软件项目、监控外部任务的运行（这个比较抽象，暂且写上，不做解释）。Jenkins用Java语言编写，可在Tomcat等流行的servlet容器中运行，也可独立运行。通常与版本管理工具(SCM)、构建工具结合使用。常用的版本控制工具有SVN、GIT，构建工具有Maven、Ant、Gradle。
Jenkins部署VUE项目
祁_z
09-09 419
1. 安装NodelJS Plugin插件 2. 构建 丢弃旧的构建 配置项目在Git仓库的地址 选择NodeJS进行构建 执行VUE构建打包命令
Jenkens 发布配置Vue
zhangiser的专栏
03-05 1199
检查nodejs 如果安装则跳过，如果没有安装则进入选择Available plugins 输入nodejs 如果有自己需要的版本则选中直接安装，如果没有，则需要自己下载安装。自己下载可以去阿里云去下载nodejs 的包下载完后上传linux 服务器 解压加压后复制权限配置nodejs。在Dashbord->Manage Jenkins->Tools 找到NodeJS 安装。
Jenkins构建vue项目
2401_85325558的博客
09-13 680
Vue 项目通常有许多依赖项，这些依赖项通过npm或yarn来管理和安装。Jenkins 在构建过程中需要运行这些包管理工具来安装项目依赖，因此必须安装 Node.js。：Vue 项目通常使用构建工具（如 Webpack、Vite）来打包和优化代码。这些构建工具基于 Node.js 运行，Jenkins 在执行构建步骤时需要调用这些工具，因此需要 Node.js 环境。：在 Vue 项目中，可能会有自定义的脚本（如构建脚本、测试脚本等）需要在 Jenkins 构建过程中执行。
Jenkins自动化部署Vue项目
qq_42109746的博客
08-22 1214
如果遇到所在的git项目，要部署的代码是在git地址里面的某个目录下，即git多包了一层，则部分配置要重新配置，不然构建时会出错误。4、构建后操作选择 Send build artifacts over ssh，输入服务器和脚本路径。在源码管理，添加附加行为，选择 Sparse Checkout paths，输入git里面所在的目录。2、源码管理选择git，输入git仓库地址和授权账号，并指明要部署的分支。到这里，常规的vue部署配置已经结束，接下来直接构建就可以了。
Jenkins权限配置和构建VUE项目
weixin_39555954的博客
08-05 2265
Jenkins权限配置和构建VUE项目
vue项目通过jenkins部署到K8s
weixin_37069728的博客
08-03 1924
前端vue部署的项目自动打包发布部署到K8S上
jenkins 部署vue项目
weixin_43326384的博客
11-06 384
vue 项目部署
ubuntu jenkins 部署vue项目
02-19
### 如何在Ubuntu上使用Jenkins部署Vue项目 #### 准备工作 为了成功配置CI/CD管道，在开始之前需确保安装并设置好必要的工具和服务。这包括但不限于Node.js环境以及Git版本控制系统。 #### 安装与配置Jenkins 首先，需要在Ubuntu服务器上安装Jenkins。可以按照官方文档中的说明完成此操作[^1]。一旦Jenkins被正确安装和启动，则可通过浏览器访问其Web界面来进行进一步的配置。 #### 创建新的Jenkins Job 进入Jenkins主页后点击新建任务按钮来建立一个新的Pipeline job用于管理Vue应用的持续集成流程。命名该job，并选择自由风格软件项目作为类型。 #### 配置源码仓库 在General选项卡下指定GitHub上的Vue应用程序存储库链接；接着切换至Source Code Management部分，选择Git并将远程URL设为目标仓库地址。同时记得添加凭证以便能够拉取私有库内的资源文件。 #### 设置构建触发器 为了让每次推送都能触发自动化过程，可以在Build Triggers里勾选`GitHub hook trigger for GITScm polling`项。如果采用的是其他托管平台比如Bitbucket或Gitee等，则应相应调整此处的选择。 #### 编写Jenkinsfile 对于现代JavaScript框架如Vue而言，建议利用多阶段Docker镜像配合pipeline-as-code的方式实现更灵活高效的流水线控制逻辑。下面给出一段适用于大多数场景下的简化版Jenkinsfile脚本： ```groovy pipeline { agent { docker 'node:lts' } stages { stage('Install Dependencies') { steps { sh 'npm ci' } } stage('Run Tests') { when { expression { return params.RUN_TESTS == true } // 可选参数，默认开启单元测试执行开关 } steps { sh 'npm run test:unit' } } stage('Build Project') { steps { sh 'npm run build' } } stage('Deploy Application') { when { branch 'master' } steps { sshagent(['your-private-key-id']) { sh ''' ssh -o StrictHostKeyChecking=no user@remote.server.com << EOF cd /path/to/deploy/ git pull origin master pm2 restart ecosystem.config.js EOF ''' } } } } } ``` 上述代码片段展示了如何定义一个多步骤的工作流，涵盖了依赖包安装、运行测试案例集、打包生产环境可用的应用程序以及最终向目标主机分发更新后的静态资产等一系列动作。值得注意的是，实际应用场景可能更加复杂多样，因此可根据具体需求对以上模板做出适当修改优化。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值