GitLab CI/CD 实现 Vue 前端全流程：解决你的开发痛点

Vue 项目部署麻烦？手动建立、上传、重新启动耗时又易错？GitLab CI/CD 为你解决这些问题，零额外安装原生支持全自动化流程。

一、整体架构：从代码提交到生产部署

传统开发痛点：

• 每次部署都要手动打包、上传文件
• 多环境切换容易出错
• 团队协作时版本管理混乱
• 无法快速回滚出现问题的版本

git push → GitLab 仓库 ↓ 自动触发 GitLab CI/CD ↓ ┌──────────────────────┐ │ stages: │ │ install → build │ │ → test → deploy │ └──────────────────────┘ ↓ 目标服务器 ↓ Nginx 服务

二、前置准备：安装 GitLab Runner

Runner 是执行 CI 任务的代理，直接在你的服务器上安装：

bash

curl -L "https://packages.gitlab.com/install/repositories/runner/gitlab-runner/script.rpm.sh" | bash yum install -y gitlab-runner

gitlab-runner register

注册后立即启动：

bash systemctl enable gitlab-runner && systemctl start gitlab-runner

常见问题处理

• Q: 注册失败？A: 检查防火墙是否放行 GitLab 地址；确认 Token 是否正确复制。
• Q: 需要多个 Runner？A: 每个项目可注册独立 Runner，或共享公用 Runner。
• Q: 低配服务器担心性能？A: 推荐单项目单 Runner，资源使用情况极小。

三、主要配置 .gitlab-ci.yml

基础版解决 80% 需求

yaml 再看stages，- install # 安装依赖阶段 - build # 建立打包阶段 - deploy # 自动部署阶段

variables: DEPLOYPATH: "/www/wwwroot/my-vue-app" NODEOPTIONS: "--max-old-space-size=8192"

cache的观点是。key: ${CICOMMITREFSLUG} 至于paths，- nodemodules/

install_deps: 说到stage，install 从tags来看，- my-vue-runner # 必须与注册时设置的名称一致！从script来看，- npm install --registry https://registry.npmmirror.com # 国内镜像加速

build_prod: 再看stage。build 从tags来看，- my-vue-runner # 同上保持一致！ 按理说，script的观点是，- npm run build # 生产模式建立

deploy_prod: 从stage来看。deploy # ⚠️ 生产环境需要手动确认！

说到进阶功能清单。

功能	配置示例	作用
多环境	needs:	开发分支自动到测试环境
通知	notify:* job	建立结果钉钉通知
回滚	BACKUP_DIR + 时间戳	一键恢复旧版本
安全校验	only/main + when/manual	防止误操作

避坑教程

1. 缓存问题首次运行会慢，后续会快很多。
2. 权限问题确保 Runner 有对目标方法的写入权限。
3. 环境变量敏感信息不要硬编码！怎么说呢，使用 GitLab 的 Variables 功能。

四、package.json 配置多环境

json { "scripts": { "dev"的观点是，"vite","build": "vite build --mode production",// 生产模式默认值" 至于"build。test": "vite build --mode test",// 测试专用配置" 说到"lint"，"eslint src --ext .vue,.js,.ts" } }

.env.production 和 .env.test 对应不同接口地址和 API Key。 VITE_API_URL=https://api.example.com VITE_API_URL=https://test.example.com

常用方法

1. **分离配置**：绝不在代码中写死任何敏感信息。 2. **统一规范**：所有项目采用相同命名方式简化维护。 3. **自检机制**：在建立脚本中加入接口可达性检查。

五、GitLab CI/CD变量管理

-> -> : Add se variables:

Key	Value	Protected	Masked	Notes
DEPLOY_SERVER_IP	xxx.xxx.xxx.xxx	✅		Target server IP address
DEPLOY_SERVER_PASS	your_password_1976!@#$%^&*	✅	✅	Server root password
DINGTALK_TOKEN

---