1.配置node.js

centos7 安装node.js

1.1.安装node.js插件

路径：Manage Jenkins > plugin Manager > 可选插件

搜索：nodejs,勾选后，点击Install without restart

1.2.配置node.js

路径：Manage Jenkins > Global Tool Configureatuib

填写node名称、node服务器路径

2.配置Maven

CentOS 安装部署 Maven

2.1.配置Maven

路径：Manage Jenkins > Global Tool Configureatuib

填写maven名称、maven服务器路径

3.配置Git

路径：Manage Jenkins > Global Tool Configureatuib

git服务器路径

4.打包Vue项目

点击新建Item

进入创建任务页面，填写任务名称，选择 Freestyle project

点击确定进入配置页面后，到源码管理选择Git,填写 Repository URL (git仓库地址)，添加和选择Credentials（认证信息，git的账号密码），Branches to build (需要构建的分支)

如果没有配置Credentials（认证信息，git的账号密码），需要添加git账户信息。

用户名、密码为必填

ID、描述为选填

其他配置为默认配置

配置完成后无报错信息，到构建环境，勾选 Provide Node & npm bin/ folder to PATH

到构建点击增加构建步骤，选择 Execute shell 选项，在文本框做添加打包命令,添加完成后，点击保存。

# 安装依赖
pnpm install
# 打包代码
pnpm build

点击启动，启动打包程序，左侧构建执行状态会展示当前任务，点击进入当前任务，进入到详情页面。

到详情页面后点击相关链接第一条，第一条为当前任务信息。

进入任务信息页后，点击控制台输出，查看当前打包过程，结果为 Finished: SUCCESS ,打包成功

打包成功后能够在工作空间中看到dist文件夹

5.部署vue项目

5.1 安装插件，Publish Over SSH

路径：Manage Jenkins > plugin Manager > 可选插件

搜索：Publish Over SSH,勾选后，点击Install without restart

5.2 配置 Publish Over SSH

路径：Manage Jenkins > Configure System > Publish over SSH > SSH Servers

点击新增，填写 Name(名称)、Hostname(服务器IP)、Username(服务器用户名)、Remote Directory(远程目录)

点击高级，高级中勾选 Use password authentication, or use a different key ，在 Passphrase / Password 中填写服务器密码。

点击右下角 Test Configuration ,测试服务器是否连接成功。连接成功点击保存。

5.3 部署打包的内容

点击刚刚配置的任务，选择配置，修改构建 > Execute shell

# 安装依赖
pnpm install;
# 打包项目
pnpm run build;
# 删除dist压缩包
rm -rf ./dist.tar.gz;
# 压缩dist文件
tar -zcvf dist.tar.gz ./dist

配置构建后操作 > 选择增加构建后操作步骤 > 选择 Send build artifacts over SSH

# 到压缩包所在目录
cd /home/tools/nginx/html/buildResult;
# 解压
tar -zxvf ./dist.tar.gz ./;
#
cd /home/tools/nginx/html;
# 删除之前的项目
rm -rf ./dx2Project;
# 移动解压的文件到现在的目录位置
mv buildResult/dist dx2Project
# 删除压缩包
rm -rf  ./buildResult/dist.tar.gz

点击启动，启动打包程序，左侧构建执行状态会展示当前任务，点击进入当前任务，进入到详情页面。到详情页面后点击相关链接第一条，第一条为当前任务信息。进入任务信息页后，点击控制台输出，查看当前打包过程，结果为 Finished: SUCCESS ,打包部署成功。

Jenkins 打包部署 vue项目相关推荐

Jenkins自动化部署Vue项目
Jenkins自动化部署Vue项目 jenkins介绍 Jenkins是开源的,使用Java编写的持续集成的工具,在Centos上可以通过yum命令行直接安装.Jenkins只是一个平台,真正运作的都 ...
Jenkins打包部署gitee项目至阿里云ECS服务器
原文地址:Jenkins打包部署gitee项目至阿里云ECS服务器 - BIGTREE (whwtree.com) 所需插件: Git Parameter Plug-In插件 Publish Over ...
使用jenkins自动化打包部署Vue项目。详细教程。
此教程 jenkins是直接部署到linux服务器上.服务器系统:CentOS 7.3 64位. 流程:jenkins关联码云仓库,点击立即构建,执行shell进行构建,打包,把打包后的dist目录文 ...
手把手教你配置：Jenkins+Github+Webhook +Nginx自动化打包部署Vue项目
前面的话为了前端项目的工程化,减少项目发布环境的部署,实现自动化打包部署. 传统的做法,在服务器初始一个 git 仓库,然后每次代码更新后,手动去拉取,次数多了也就烦了,而自动化打包部署每次只需在项 ...
Jenkins 自动部署VUE项目
文章目录 CI/CD的总流程配置 NodeJS 环境安装插件安装环境新建任务配置构建环境编写构建脚本项目配置配置 Dockerfile 配置 nginx CI/CD的总流程持续集成和 ...
华为云软件开发平台(DevCloud)流水线式部署Vue项目，并且通过域名访问
一.准备环境 1.1.华为弹性云服务器(ECS)或者云耀云服务器(HECS) 1.2.软件开发平台(DevCloud) 1.3.容器镜像服务(SWR) 1.4.云解析服务(SWR) 二.软件开发平台( ...
在nginx上部署vue项目(history模式)；
在nginx上部署vue项目(history模式): vue-router 默认是hash模式,使用url的hash来模拟一个完整的url,当url改变的时候,页面不会重新加载.但是如果我们不想has ...
创建基于webpack打包的vue项目
创建基于webpack打包的vue项目结合win7.element-ui.vue(vue-router.vue-cli).webpack等技术,完成了项目的基础工作.难则不会,会则不难:贵在经验总结 ...
VUE项目学习（三）：win10版nginx部署vue项目
VUE项目学习(三):win10版nginx部署vue项目 niginx的安装和启停操作参照博客:https://blog.csdn.net/qq_26666947/article/details/1 ...

Jenkins 打包部署 vue项目

1.配置node.js

1.1.安装node.js插件

1.2.配置node.js

2.配置Maven

2.1.配置Maven

3.配置Git

4.打包Vue项目

5.部署vue项目

5.1 安装插件，Publish Over SSH

5.2 配置 Publish Over SSH

5.3 部署打包的内容

Jenkins 打包部署 vue项目相关推荐

最新文章

热门文章