当前位置：首页 > news >正文

如何搭建 Vue.js 开源项目的 CI/CD 流水线

news 来源：原创 2025/5/7 11:03:06

在这里插入图片描述

网罗开发 （小红书、快手、视频号同名）

大家好，我是展菲，目前在上市企业从事人工智能项目研发管理工作，平时热衷于分享各种编程领域的软硬技能知识以及前沿技术，包括iOS、前端、Harmony OS、Java、Python等方向。在移动端开发、鸿蒙开发、物联网、嵌入式、云原生、开源等领域有深厚造诣。

图书作者：《ESP32-C3 物联网工程开发实战》
图书作者：《SwiftUI 入门，进阶与实战》
超级个体：COC上海社区主理人
特约讲师：大学讲师，谷歌亚马逊分享嘉宾
科技博主：极星会首批签约作者

文章目录

- 摘要
- 引言
- 选择合适的 CI/CD 工具
- GitHub Actions 实现 CI/CD 流水线
- - GitHub Actions 配置文件
  - 自动化测试和构建
  - 代码示例
- Jenkins 实现 CI/CD 流水线
- - Jenkins 配置步骤
  - 代码示例
- 流水线运行和监控
- QA环节
- 总结
- 参考资料

摘要

本文旨在探讨如何为开源的 Vue.js 项目构建 CI/CD 流水线，以实现自动化的构建、测试和发布流程。通过使用 GitHub Actions 和 Jenkins 等工具，可以显著提高开发效率，减少手动操作带来的错误。文章将详细介绍流水线的设计和实现，并提供可运行的示例代码模块。

引言

随着前端技术的不断发展，Vue.js 凭借其简洁、灵活和高效的特性，已经成为众多开发者心中的首选。然而，对于开源项目来说，缺乏自动化的构建和发布流程会导致开发效率低下，且手动操作容易出错。因此，搭建 CI/CD 流水线成为提高项目质量和开发效率的关键。

选择合适的 CI/CD 工具

GitHub Actions
- GitHub 提供的 CI/CD 服务，支持自定义工作流程。
- 与 GitHub 仓库无缝集成，方便管理。
Jenkins
- 一个强大的持续集成/持续部署（CI/CD）工具，支持多种语言和平台。
- 需要单独安装和配置，但功能强大且灵活。

GitHub Actions 实现 CI/CD 流水线

GitHub Actions 配置文件

在 Vue.js 项目的根目录下创建一个名为 .github/workflows/ci-cd.yml 的文件，这是 GitHub Actions 的配置文件。

name: CI/CD Pipelineon:push:branches:- mainpull_request:branches:- mainjobs:build:runs-on: ubuntu-lateststeps:- name: Checkout codeuses: actions/checkout@v2- name: Set up Node.jsuses: actions/setup-node@v2with:node-version: '14'- name: Install dependenciesrun: npm install- name: Build projectrun: npm run build- name: Run testsrun: npm run test- name: Deploy to server (optional)# 这里可以添加部署到服务器的步骤，例如使用 SSH 部署工具# 需要先配置服务器的 SSH 密钥等# run: scp -r dist/* user@yourserver:/path/to/deploy/directory

自动化测试和构建

在 package.json 文件中配置 scripts，以便在 CI/CD 流水线中运行测试和构建命令。

{"scripts": {"build": "vue-cli-service build","test": "jest"}
}

代码示例

示例项目结构

my-vue-project/
├── .github/
│   └── workflows/
│       └── ci-cd.yml
├── dist/
├── node_modules/
├── public/
├── src/
├── package.json
└── vue.config.js

示例 vue.config.js 配置

module.exports = {publicPath: process.env.NODE_ENV === 'production' ? '/production-sub-path/' : '/'
}

Jenkins 实现 CI/CD 流水线

Jenkins 配置步骤

安装 Jenkins：在服务器上安装 Jenkins，并配置好访问权限。
创建项目：在 Jenkins 中创建一个新项目，选择适合的项目类型（如 Maven、Gradle 等）。
配置源码管理：在项目配置中，设置源码管理（如 Git），以便 Jenkins 可以拉取最新的代码。
配置构建触发器：在构建触发器中，选择适合的触发方式（如定期轮询、代码提交等），以便 Jenkins 在适当的时机自动触发构建。
配置构建步骤：在构建步骤中，设置构建过程，包括打包、测试等。可以使用 Jenkins 提供的插件来简化构建过程。
配置发布步骤：在发布步骤中，设置发布过程，包括将构建产物部署到目标环境、执行必要的脚本等。可以使用 Jenkins 的插件（如 Publish Over SSH）来简化发布过程。

代码示例

示例 Jenkinsfile

pipeline {agent anystages {stage('Checkout') {steps {git 'https://your-git-repo-url.git'}}stage('Build') {steps {script {sh 'npm install'sh 'npm run build'}}}stage('Test') {steps {script {sh 'npm run test'}}}stage('Deploy') {steps {script {// 部署步骤，例如使用 SSH 部署到服务器// sh 'scp -r dist/* user@yourserver:/path/to/deploy/directory'}}}}
}

流水线运行和监控

在 GitHub Actions 中，可以在仓库的 “Actions” 选项卡中查看流水线的运行情况和日志。
在 Jenkins 中，可以在仪表盘中查看流水线的运行状态和日志，方便进行问题排查和监控。

QA环节

Q1：GitHub Actions 和 Jenkins 哪个更适合 Vue.js 项目？

A1：这取决于项目的具体需求和团队的偏好。GitHub Actions 与 GitHub 仓库无缝集成，配置简单且方便管理。而 Jenkins 功能强大且灵活，但需要单独安装和配置。

Q2：如何在 CI/CD 流水线中处理不同环境的配置？

A2：可以通过环境变量或配置文件来区分不同环境的配置。例如，在 .env 文件中定义不同环境的变量，然后在构建时根据环境变量来设置相应的配置。

总结

本文详细介绍了如何利用 GitHub Actions 和 Jenkins 为 Vue.js 开源项目设计 CI/CD 流水线，实现了自动化的构建、测试和发布流程。通过搭建 CI/CD 流水线，可以显著提高开发效率，减少手动操作带来的错误，从而提高项目的质量和稳定性。

随着前端技术的不断发展和开源社区的壮大，Vue.js 项目将会面临更多的挑战和机遇。未来，可以进一步优化 CI/CD 流水线的配置和流程，引入更多的自动化工具和技术，如自动化测试框架、性能监控工具等，以提升项目的开发效率和质量。

参考资料

Vue.js 官方文档
GitHub Actions 官方文档
Jenkins 官方文档

如何搭建 Vue.js 开源项目的 CI/CD 流水线

网罗开发 （小红书、快手、视频号同名） 大家好，我是展菲，目前在上市企业从事人工智能项目研发管理工作，平时热衷于分享各种编程领域的软硬技能知识以及前沿技术，包括iOS、前端、Harmony OS、Java、Python等…...

编程日记 2025/5/7 11:03:06

OCR文字识别—基于PP-OCR模型实现ONNX C++推理部署

概述 PaddleOCR 是一款基于 PaddlePaddle 深度学习平台的开源 OCR 工具。PP-OCR是PaddleOCR自研的实用的超轻量OCR系统。它是一个两阶段的OCR系统，其中文本检测算法选用DB，文本识别算法选用CRNN，并在检测和识别模块之间添加文本方向分类器&a…...

编程日记 2025/4/30 20:02:17

国产3D CAD将逐步取代国外软件

在工业软件的关键领域，计算机辅助设计（CAD）软件对于制造业的重要性不言而喻。近年来，国产 CAD 的发展态势迅猛，展现出巨大的潜力与机遇，正逐步改变着 CAD 市场长期由国外软件主导的格局。国产CAD发展现状 …...

编程日记 2025/5/3 7:41:12

GoLand 如何集成 Netty？

目录 1.回答问题： 2.以下是实现类似 Netty 功能的步骤： 2.1 实现基本的网络通信功能： 3. 使用 Go 的第三方库实现 Netty 功能 4.实现类似 Netty 的事件循环： 5. 运用场景： 1.回答问题： 要在 GoLand 中…...

编程日记 2025/5/6 11:29:38

C++中为什么要把基类指针指向子类对象？

为什么要把基类指针指向子类对象？ 1）实现多态性动态绑定行为：通过基类指针指向子类对象，可以利用 C 的多态机制。当基类中有虚函数，并且子类重写了这些虚函数时，通过基类指针调用虚函数，实际调…...

编程日记 2025/5/5 10:42:58

2025年第三届“华数杯”国际赛A题解题思路与代码（Matlab版）

游泳竞技策略优化模型代码详解（MATLAB版） 第一题：速度优化模型本部分使用MATLAB实现游泳运动员在不同距离比赛中的速度分配策略优化。 1. 模型概述模型包含三个主要文件： speed_optimization.m: 核心优化类plot_speeds.m: …...

编程日记 2025/5/5 0:43:16

做一个简单的Django 《股票自选助手》显示用akshare 库（A股数据获取）

图： 股票自选助手这是一个基于 Django 开发的 A 股自选股票信息查看系统。系统使用 akshare 库获取实时股票数据，支持添加、删除和更新股票信息。功能特点支持添加自选股票实时显示股票价格和涨跌幅一键更新所有股票数据支持删除不需要的股票使用中…...

编程日记 2025/5/3 20:56:37

深入探索 ScottPlot.WPF：在 Windows 桌面应用中绘制精美图表的利器

一、ScottPlot.WPF 简介 ScottPlot.WPF 是基于 ScottPlot 绘图库专门为 Windows Presentation Foundation (WPF) 框架量身定制的强大绘图组件。它无缝集成到 WPF 应用程序中，为开发者提供了一种简洁、高效的方式来可视化数据，无论是科学研究中的实验数据展示、金融领域的行情…...

编程日记 2025/5/7 10:54:55

Spring bean的生命周期和扩展

接AnnotationConfigApplicationContext流程看实例化的beanPostProcessor-CSDN博客，以具体实例看bean生命周期的一些执行阶段 bean生命周期流程生命周期扩展处理说明实例化:createBeanInstance 构造方法， 如Autowired的构造方法注入依赖bean 如UserSer…...

编程日记 2025/5/4 5:11:28

【Docker】docker compose 安装 Redis Stack

注：整理不易，请不要吝啬你的赞和收藏。前文 Redis Stack 什么是？ 简单来说，Redis Stack 是增强版的 Redis ，它在传统的 Redis 数据库基础上增加了一些高级功能和模块，以支持更多的使用场景和需求。Redis…...

编程日记 2025/5/7 10:53:47

Life Long Learning（李宏毅）机器学习 2023 Spring HW14 (Boss Baseline)

1. 终身学习简介神经网络的典型应用场景是，我们有一个固定的数据集，在其上训练并获得模型参数，然后将模型应用于特定任务而无需进一步更改模型参数。然而，在许多实际工程应用中，常见的情况是系统可以不断地获取新数据，例如 Web 应用程序中的新用户数据或自动驾驶中的…...

编程日记 2025/4/26 23:40:15

JavaEE之线程池

前面我们了解了多个任务可以通过创建多个线程去处理，达到节约时间的效果，但是每一次的线程创建和销毁也是会消耗计算机资源的，那么我们是否可以将线程进阶一下，让消耗计算机的资源尽可能缩小呢？线程池可以达到此效果&a…...

编程日记 2025/5/3 22:03:35

错误修改系列---基于RNN模型的心脏病预测(pytorch实现)

前言前几天发布了pytorch实现，TensorFlow实现为：基于RNN模型的心脏病预测(tensorflow实现)，但是一处繁琐地方一处错误，这篇文章进行修改，修改效果还是好了不少；源文章为：基于RNN模型的心脏病…...

编程日记 2025/5/5 17:32:52

修改之前的代码使得利用设备树文件和Platform总线设备驱动实现对多个LED的驱动【只是假想对LED进行驱动,并没有实际的硬件操作】

引言在下面这篇博文中： 利用Linux的Platform总线设备驱动实现对多个LED的驱动【只是假想对LED进行驱动,并没有实际的硬件操作】我们利用Platform总线设备驱动的思想实现了对多个LED的驱动。 Platform总线设备驱动以及其它的总线设备驱动都将驱动分成了三个部分…...

编程日记 2025/4/30 6:28:52

从CentOS到龙蜥：企业级Linux迁移实践记录（龙蜥开局）

引言： 在我们之前的文章中，我们详细探讨了从CentOS迁移到龙蜥操作系统的基本过程和考虑因素。今天，我们将继续这个系列，重点关注龙蜥系统的实际应用——特别是常用软件的安装和配置。龙蜥操作系统（OpenAnolis&#…...

编程日记 2025/5/5 11:59:58

多云架构，JuiceFS 如何实现一致性与低延迟的数据分发

随着大模型的普及，GPU 算力成为稀缺资源，单一数据中心或云区域的 GPU 资源常常难以满足用户的全面需求。同时，跨地域团队的协作需求也推动了企业在不同云平台之间调度数据和计算任务。多云架构正逐渐成为一种趋势，然而该架构下的数…...

编程日记 2025/5/6 20:12:41

Jenkins持续集成与交付安装配置

Jenkins 是一款开源的持续集成（CI）和持续交付（CD）工具，它主要用于自动化软件的构建、测试和部署流程。为项目持续集成与交付功能强大的应用。下面我们来介绍下它的安装与配置。环境准备更新系统组件（这…...

编程日记 2025/5/2 20:41:00

十大排序简介

十大排序简介一、排序分类二、排序思路1．冒泡排序（Bubble Sort）2．选择排序（Selection Sort）3．插入排序（Insertion Sort）4．希尔排序（Shell Sort&a…...

编程日记 2025/5/5 22:47:56

uniapp小程序中隐藏顶部导航栏和指定某页面去掉顶部导航栏小程序

uniappvue3开发小程序过程中隐藏顶部导航栏和指定某页面去掉顶部导航栏方法在page.json中 "globalStyle": {"navigationStyle":"custom",}, 如果是指定某个页面关闭顶部导航栏，在style中添加"navigationStyle": "cus…...

编程日记 2025/4/30 7:54:48

echarts：dataZoom属性横向滚动条拖拽不生效

问： 拖拽的过程中，第一次向右拖拽正常，然后就报错： echarts报错： var pointerOption pointerShapeBuilder[axisPointerType](axis,pixeValue,otherExtent),(axis,pixeValue,otherExtent)下划线红色报错：…...

编程日记 2025/4/24 14:53:05

【Leetcode 热题 100】739. 每日温度

问题背景给定一个整数数组 t e m p e r a t u r e s temperatures temperatures，表示每天的温度，返回一个数组 a n s w e r answer answer，其中 a n s w e r [ i ] answer[i] answer[i] 是指对于第 i i i 天，下一个更高温度…...

编程日记 2025/5/5 18:03:31

R数据分析：多分类问题预测模型的ROC做法及解释

有同学做了个多分类的预测模型，结局有三个类别，做的模型包括多分类逻辑回归、随机森林和决策树，多分类逻辑回归是用ROC曲线并报告AUC作为模型评估的，后面两种模型报告了混淆矩阵，审稿人就提出要统一模型评估指标。那么肯定是统一成ROC了，刚好借这个机会给大家讲讲ROC在多…...

编程日记 2025/5/5 16:08:25

如何用 SSH 访问 QNX 虚拟机

QNX 虚拟机默认是开启 SSH 服务的，如果要用 SSH 访问 QNX 虚拟机，就需要知道虚拟机的 IP 地址，用户和密码。本文我们来看看如何获取这些参数。 1. 启动虚拟机启动过程很慢，请耐心等待。 2. 查看 IP 地址等待 IDE 连接到虚拟机。…...

编程日记 2025/5/4 17:34:22

交响曲-24-3-单细胞CNV分析及聚类

CNV概述小于1kb是常见的插入、移位、缺失等的变异人体内包含<10% 的正常CNV，我们的染色体数是两倍体，正常情况下，只有一条染色体表达，另一条沉默，当表达的那条染色体发生CNV之后，表达数量就会成倍增加…...

编程日记 2025/5/4 12:07:53

java远程调试debug

文章目录首先被调试的服务配置idea 中配置远程调试连接上被调试服务打断点开始调试首先被调试的服务配置被调试的 java 服务需要开启允许被远程调试的配置，具体就是启动脚本中，加上允许被远程调试以及相应端口 # 针对JDK15.-1.8 -agentlib:jdwptran…...

编程日记 2025/5/3 21:31:08

操作系统之系统调用

系统调用从上文简介得知，操作系统是计算机硬件和软件之间的桥梁，通过管理计算机软件和硬件资源，最终为我们用户提供服务。就如同一个管家帮助我们对CPU（进程）的管理、内存的管理、设备的管理、文件的管理。而我们如何…...

编程日记 2025/5/4 17:32:14

【docker】exec /entrypoint.sh: no such file or directory

dockerfile生成的image 报错内容： exec /entrypoint.sh: no such file or directory查看文件正常在此路径，但是就是报错没找到。可能是因为sh文件的换行符使用了win的。...

编程日记 2025/4/30 23:42:39

CAPL概述与环境搭建目录 CAPL概述与环境搭建1. CAPL简介与应用领域1.1 CAPL简介1.2 CAPL的应用领域 2. CANoe/CANalyzer 安装与配置2.1 CANoe/CANalyzer 简介2.2 安装CANoe/CANalyzer2.2.1 系统要求2.2.2 安装步骤 2.3 配置CANoe/CANalyzer2.3.1 配置CAN通道2.3.2 配置CAPL节点…...

编程日记 2025/5/6 5:19:37

ML-Agents：智能体（三）

注：本文章为官方文档翻译，如有侵权行为请联系作者删除 Agent - Unity ML-Agents Toolkit–原文链接> ML-Agents：智能体（一） ML-Agents：智能体（二） ML-Agents：智能体&a…...

编程日记 2025/5/5 17:45:07

【harbor】离线安装2.9.0-arm64架构服务制作和升级部署

执行: .prepare 【作用就是产生一些配置信息和docker-compose.yaml文件，然后docker-compose发布docker】 harbor官网地址：Harbor 参考文档可以看这里：部署 harbor 2.10.1 arm64 - 简书。前提环境准备： 安装docker 和 docker…...

编程日记 2025/5/6 14:12:26

可视化-Visualization

可视化-Visualization 1.Introduction Visualization in Open CASCADE Technology is based on the separation of: on the one hand – the data which stores the geometry and topology of the entities you want to display and select, andon the other hand – its pr…...

编程日记 2025/5/7 8:28:41

文章目录

摘要

引言

选择合适的 CI/CD 工具

GitHub Actions 实现 CI/CD 流水线

GitHub Actions 配置文件

自动化测试和构建

代码示例

Jenkins 实现 CI/CD 流水线

Jenkins 配置步骤

代码示例

流水线运行和监控

QA环节

总结

参考资料

相关文章：