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

news/2025/2/13 5:26:17/

在这里插入图片描述
在这里插入图片描述

网罗开发 (小红书、快手、视频号同名)

  大家好,我是 展菲,目前在上市企业从事人工智能项目研发管理工作,平时热衷于分享各种编程领域的软硬技能知识以及前沿技术,包括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 工具

  1. GitHub Actions

    • GitHub 提供的 CI/CD 服务,支持自定义工作流程。
    • 与 GitHub 仓库无缝集成,方便管理。
  2. 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 配置步骤

  1. 安装 Jenkins:在服务器上安装 Jenkins,并配置好访问权限。
  2. 创建项目:在 Jenkins 中创建一个新项目,选择适合的项目类型(如 Maven、Gradle 等)。
  3. 配置源码管理:在项目配置中,设置源码管理(如 Git),以便 Jenkins 可以拉取最新的代码。
  4. 配置构建触发器:在构建触发器中,选择适合的触发方式(如定期轮询、代码提交等),以便 Jenkins 在适当的时机自动触发构建。
  5. 配置构建步骤:在构建步骤中,设置构建过程,包括打包、测试等。可以使用 Jenkins 提供的插件来简化构建过程。
  6. 配置发布步骤:在发布步骤中,设置发布过程,包括将构建产物部署到目标环境、执行必要的脚本等。可以使用 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 官方文档

http://www.ppmy.cn/news/1562927.html

相关文章

用python实战excel和word自动化

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 python实现excel和word自动化--批量处理 前言--需求快要期末了需要,提交一个年级的学生成绩数据,也就是几百份。当前我们收集了一份excel表格&#xf…

【matlab学习】使用matlab求解微积分,进行数值积分和符号积分的计算

本部分的学习参考欧攀老师的《高等光学仿真(MATLAB版)》,为自学笔记 基本概念 符号积分,又称解析积分,是微积分中的一个基本运算。它通过数学推导和变换,求出被积函数的原函数或反导数,从而得到积分的精确值。符号积分的表示方法主要依赖于积分符号“∫”以及被积函数和…

大模型系列——推理能力增强 rStar-Math 论文笔记

我们提出rStart-Math来证明小型语言模型SLM可以与OpenAI O1的数学推理能力相媲美甚至超越,而无需从更高级的模型中蒸馏。rStart-Math通过蒙特卡洛树搜索MCTS来实现深度思考,其中一个数学策略SLM执行测试时搜索,该搜索由基于SLM的过程奖励模型…

设计模式(3)——工厂模式

文章目录 三、day31. 简单工厂模式2. 工厂模式3. 抽象工厂模式 三、day3 今天学习最常见的设计模式之一——工厂模式。工厂模式提供了一种创建对象的最佳方式,在创建对象的时候,不会对客户端暴露创建逻辑,并且通过使用一个共同的接口来创建新…

【免费开源】积木JimuBI大屏集成ruoyiVue

JimuBI介绍 JimuBI 是一个JAVA语言的低代码数据可视化大屏BI产品,将大屏、仪表盘、移动面板、图表或页面元素封装为基础组件,无需编写代码即可完成业务需求。 这是JeecgBoot团队出品的另外一款报表产品,积木报表已经成为业内报表首先&#x…

品牌账号矩阵如何打造?来抄作业

在讲究全域营销的当下,目前企业都在各自搭建品牌矩阵号,以提升自己在不同渠道上的影响力。虽然不同平台之间有诸多细节值得深究,但也不妨碍我们先了解如何搭建品牌矩阵。接下来,就让我们一同来了解下该如何搭建。 一、一个主账号 …

初学stm32 --- DAC输出三角波和正弦波

输出三角波实验简要: 1,功能描述 通过DAC1通道1(PA4)输出三角波,然后通过DS100示波器查看波形 2,关闭通道1触发(即自动) TEN1位置0 3,关闭输出缓冲 BOFF1位置1 4,使用12位右对齐模式 将数字量写入DAC_…

SpringBoot项目实战(39)--Beetl网页HTML文件中静态图片及CSS、JS文件的引用和展示

使用Beetl开发网页时,在网页中使用的CSS、JS、图片等静态资源需要进行适当的配置才可以展示。大致的过程如下: (1)首先Spring Security框架需要允许js、css、图片资源免授权访问。 (2)网站开发时&#xff0…