vue项目自动构建部署，Jenkins+nginx+gitlab

最新推荐文章于 2025-07-12 11:55:37 发布
最新推荐文章于 2025-07-12 11:55:37 发布
阅读量1.8k 收藏 2
点赞数
CC 4.0 BY-SA版权
分类专栏： vue 文章标签： jenkins vue.js nginx
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013938465/article/details/122324183

win10系统

gitlab用的官网gitlab:https://gitlab.com/

思路

1、将自己电脑变成一台服务器（如果有真的服务器，也可）

参考这个文章：

如何在win10上搭建服务器_Arcobaleno-CSDN博客_win10搭建服务器

2、gitlab提交代码后，jenkins将代码拉取到workspace里进行安装、打包

        方式一：直接在win10下安装jenkins，启动

             win10下安装Jenkins_weixin_30466421的博客-CSDN博客

        方式二：win10下安装docker，安装jenkins/jenkins镜像，docker命令启动jenkins

最低0.47元/天 解锁文章

200万优质内容无限畅学
Openresty 中部署Vue项目
CarolLiu的博客
03-05 1354
不同于原生nginx部署和宝塔面板中的nginx方式部署vue项目，在openresty中直接代理vue项目会出现点击不同的菜单（url）返回404的问题，这是因为你的openresty还没有配置好。，在里面写天如下内容（重点！这个配置是vue路由正确的关键）（即你刚才上传并解压缩的vue项目文件夹）中直接切换打开网站所在文件夹。好的vue文件夹并解压缩。
gitlab+jenkins自动化部署vue项目
Heasdfghjkl的博客
04-03 1009
gitlab+jenkins自动化部署vue项目1. 环境搭建1.1 gitlab安装1.1.1 gitlab-ee安装1.1.2 相关配置以及命令1.1.3 通知邮箱配置1.1.4 开放8888端口1.2 jenkins安装（前提需要java环境）2. 自动化配置2.1 本地创建vue项目并提交到gitlab2.2 jenkins配置2.3 gitlab钩子配置 1. 环境搭建 1.1 gitlab安装 1.1.1 gitlab-ee安装 环境安装： sudo yum install -y curl po
jenkins自动部署vue前端项目
08-15
jenkins自动打包vue前后端分离项目，部署到远程服务器
jenkins部署vue前端项目
最新发布
G_whang的博客
07-12 543
本文介绍了使用Jenkins部署前端Vue项目的完整流程。首先通过源码编译安装Nginx作为前端服务器，配置好静态文件目录。接着在Jenkins中创建任务，配置Git源码地址，并通过Shell脚本完成依赖安装（处理了chromedriver和node-sass的安装问题）、项目构建、以及将生成的dist目录部署到Nginx的过程。文章详细记录了构建过程中遇到的权限问题和依赖安装错误，并提供了解决方案。最终实现前端项目的自动化部署，成功通过浏览器访问部署后的Vue应用。该方法避免了每次手动部署的繁琐操作，提高
Vue自动构建发布脚本的方法示例
11-20
简介 使用cross-env, scp2两个插件完成 cross-env cross-env这是一款运行跨平台设置和使用环境变量的脚本。 为什么需要cross-env? NODE_ENV=production 像这样设置环境变量时，大多数Windows命令提示符都会阻塞 。（Windows上的Bash是例外，它使用本机Bash。）同样，Windows和POSIX命令使用环境变量的方式也有所不同。对于POSIX，您可以使用： $ENV_VAR 和在Windows上可以使用 %ENV_VAR% 。 cross-env这样，您就可以使用单个命令，而不必担心为平台正确设置或使用环境变量。就像在P
【笔记】Vue组件自动化构建
ATI_MAD_TEAM的博客
01-15 391
组件 最开始使用组件的时候，每次都是从页面单独引进注册，页面一多 维护起来就特别麻烦，特别是遇到不太智能的编辑器，组件路径一变就得修改页面的引用路径，浪费太多时间。 后来，为了方便管理，在vue实例化之前全局注册组件，与main.js分离。 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅...
Jenkins & Nginx & Vue项目自动化部署
孟林洁的博客
11-28 1406
因为安装nvm时候配置的nodejs的路径不存在，导致环境变量配置有问题。解决：nvm/新建 nodejs 文件夹，修改环境变量指向 nvm/nodejs。qq邮箱/账号与安全/获取授权码，用户名：发件邮箱 密码：授权码。去Gitee webhook里新建填写url和密码。nvm安装完node，node、npm命令无法使用。删除node_module 重新执行命令打包。1.3 Nginx安装。NodeJS配置路径。默认构建失败发送邮件。
Jenkins + Gitlab 实现自动部署Java后端项目（前后端分离），零基础教程（Windows）
weixin_51304589的博客
11-25 1356
如果失败可以点击构建控制台查看失败原因，这块的问题各种各样，需要自己研究了，我这块是应为打包的时候依赖问题，就不给大家演示了，如果成功，可以启动一下前端项目访问一下这个后端是否可行；我这的采用的是打包完成之后将文件拷贝到 nginx 中，然后重启nginx服务，如果想直接运行拉取完之后的代码，更改命令即可，这里我就不列举出来了，大家自己研究一下了；注意：配置文件中的路径以及项目名称需要更改为自己的，nginx配置可以使用默认的，也就是路径中的 MASTER 更改为 heml 就可以了；
使用Docker+Jenkins+Gitee自动化部署Vue+ElementUI项目
ptGrapes的博客
12-09 2511
百分百将vue项目打包成镜像部署在服务器上
vue+jenkins+nginx+node+koa搭建一整套案例和原理
05-30 992
搭建一个使用 Vue、Jenkins、Nginx、Node.js（Koa框架）的全栈应用涉及到前端界面、持续集成/持续部署（CI/CD）、后端服务以及Web服务器的配置。下面是一个基础的项目搭建案例，以及一些关键概念的原理解释。
【Jenkins自动化部署】Vue服务自动化打包构建
09-08 3463
Jenkins 系列会从 Ubuntu的服务端部署、 Linux节点的Python服务自动化构建、 Windows节点Python服务自动化构建、 Vue服务自动化构建、 监控服务自动化构建、 用户权限控制 几个方面进行介绍
vue+ts自动构建,无需vue add typescript
qq_43615089的博客
03-12 1297
vue+ts命令行构建，无需vue add typescript
Jenkins构建打包部署前端Vue项目至Nginx
askuld的博客
06-04 708
配置node.js1、创建项目2、配置gitee3、配置源码4、构建环境/bin/bashnpm -v。
Jenkins + Github + Nginx 自动化部署 Vue 项目
程序员小明1024
12-24 316
@charset "UTF-8"; .markdown-body { line-height: 2; font-weight: 400; font-size: 15px; overflow-x: hidden; color: rgba(51, 51, 51, 1); letter-spacing: 1.2px } .markdown-body h1, .markdown-body h2, .ma...
jenkins自动构建VUE前端项目
weixin_41481806的博客
10-12 1495
jenkins自动构建VUE前端项目
Jenkins自动构建部署vue项目 Nginx
changaspl
02-02 791
Jenkins自动构建部署vue项目 Nginx 前言 把代码提交到github，然后通过Jenkins自动构建项目部署到docker中的Nginx 本项目是使用 vue-admin-template 进行二次开发 后端使用：springboot+mybatisplus+Redis+mysql 环境： 服务器1（阿里云学生机）：以前安装了Jenkins 服务器2（阿里云按量付费）：安装docker Nginx 流程： 项目提交到github ——> 构建打包 ——> 发送到有Nginx的服务器
jenkins前端自动化部署（vue+nginx）本地部署
qq_38643028的博客
04-11 802
jenkins+nginx+vue+git自动化前端部署（此文章仅介绍jenkins安装，配置，创建项目）
Jenkins+Gitlab实现Vue项目自动化部署
weixin_45351534的博客
09-28 986
标题Jenkins+Gitlab实现Vue项目自动化部署 1.Jenkins操作 1.1创建项目 1.1.1新建Jenkins项目，填写项目信息，点击左下方确定 1.2进入配置项 1.2.1 General 书写相关项目描述 1.2.2源码管理 选择Git还是svn进行代码管理 本项目采用Gitlab，选择Git，并且填写凭据信息 输入仓库地址后出现错误 点击Credentials 的下拉选择添加的凭据用户名报错消失 1.2.3构建环境 npm install —>下载工作区npm包
Gitlab+nginx +jenkins 部署vue
03-22
接下来，整个流程应该是：开发者在本地开发Vue项目，推送到GitLab仓库，Jenkins监测到变更后自动构建，然后将构建后的静态文件部署到服务器，由Nginx提供服务。 接下来，我需要分步骤来写。可能分为环境准备、配置...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值