jenkins上部署前端vue项目

简介: jenkins上部署前端vue项目

在这里默认读者已经安装完jenkins,如有没有安装的可参照

jenkins安装与部署

具体步骤

配置步骤按照以下图片操作即可

构建项目

image.png

General

image.png

源码管理

image.png

构建环境

image.png

注:此处的nodejs14是需要在系统管理-》全局工具配置 中配置以下nodejs

在这之前,需要先安装nodejs插件
image.png

构建

image.png
shell脚本如下:

cd /root/.jenkins/workspace/qiaomu-vue
node -v
npm -v
npm install
npm run build
cd dist
rm -rf qiaomu-vue.tar.gz
tar -zcvf qiaomu-vue.tar.gz *

构建后操作

image.png
注:deploy.sh(存放到目标服务器的/tools/soft/html文件夹内) 脚本的内容


#!/bin/bash
tar -xzvf $1 -C $2
find $2 -name "*.tar.gz" -exec rm -rf {
   
   }  \;
echo '发布成功'
目录
相关文章
|
26天前
|
JavaScript 前端开发
总结 Vue3 的一些知识点:Vue3 项目打包
总结 Vue3 的一些知识点:Vue3 项目打包
|
1天前
|
JavaScript 前端开发
React与Vue性能对比:两大前端框架的性能
React与Vue性能对比:两大前端框架的性能
|
5天前
|
存储 前端开发 JavaScript
【JavaEE初阶】 博客系统项目--前端页面设计实现
【JavaEE初阶】 博客系统项目--前端页面设计实现
|
6天前
|
前端开发 JavaScript C++
探讨前端框架选择:React vs Angular vs Vue
【2月更文挑战第2天】 在当今快速发展的前端开发领域,选择合适的前端框架至关重要。本文将深入探讨三大热门前端框架:React、Angular和Vue,分析它们的特点、优势和劣势,帮助开发者更好地理解并选择适合自己项目的前端框架。
11 3
|
6天前
|
JavaScript 前端开发 API
新一代前端框架Vue 4.0的特性及应用
【2月更文挑战第2天】随着前端技术的不断发展,Vue作为一款优秀的前端框架在市场上得到了广泛的应用和认可。本文将介绍新一代前端框架Vue 4.0的特性及其在实际项目中的应用,帮助开发者更好地了解并应用这一技术。
|
8天前
|
JavaScript 应用服务中间件 nginx
VUE3项目启动过程中遇到的问题记录
VUE3项目启动过程中遇到的问题记录
20 0
|
23天前
|
JSON 前端开发 Java
springboot项目实现实体类加密存库,解密返回给前端
springboot项目实现实体类加密存库,解密返回给前端
18 0
|
23天前
|
JavaScript 前端开发 测试技术
消灭前端闪烁魔鬼:Vue中的防抖术
消灭前端闪烁魔鬼:Vue中的防抖术
37 0
|
24天前
|
前端开发 JavaScript 安全
|
26天前
|
JavaScript 前端开发
报错:关于Vue项目下载swiper插件时没有dist文件夹的问题
报错:关于Vue项目下载swiper插件时没有dist文件夹的问题

相关产品

  • 云迁移中心