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

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

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

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

摘要

本文旨在探讨如何为开源的 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 官方文档