Vue2 + Element UI 项目完整CI/CD部署指南📋 项目概述这是一个基于Vue2 + Element

📋 项目概述

这是一个基于Vue2 + Element UI的前端项目，通过GitHub Actions实现自动化CI/CD部署到GitHub Pages。

🚀 CI/CD 完整流程

1. 项目初始化配置

GitHub仓库设置

创建GitHub仓库：vue2-element-project
启用GitHub Pages：设置 → Pages → Source选择gh-pages分支
配置SSH密钥：用于自动化部署认证

项目配置文件

# package.json - 包管理配置
{
  "name": "vue2-element-project",
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "dev": "vue-cli-service serve"
  },
  "dependencies": {
    "vue": "^2.6.14",
    "vue-router": "^3.5.4",
    "element-ui": "^2.15.14"
  }
}

// vue.config.js - Vue项目配置
module.exports = {
  publicPath: process.env.NODE_ENV === 'production' 
    ? '/vue2-element-project/' 
    : '/',
  devServer: { port: 8080, hot: true },
  productionSourceMap: false
};

2. GitHub Actions 工作流配置

主部署工作流 (.github/workflows/deploy.yml)

name: Vue2 Element UI - Auto Deploy

on:
  push:
    branches: [ main ]
  workflow_dispatch:  # 支持手动触发

env:
  NODE_VERSION: '18'
  PUBLIC_PATH: '/vue2-element-project/'

jobs:
  quality-check:
    name: "代码质量检查"
    runs-on: ubuntu-latest
    steps:
      - name: 检出代码
        uses: actions/checkout@v4
      
      - name: 设置Node.js环境
        uses: actions/setup-node@v4
        with:
          node-version: ${{ env.NODE_VERSION }}
          cache: 'yarn'
      
      - name: 安装依赖
        run: yarn install --frozen-lockfile
      
      - name: 构建项目
        run: yarn build
      
      - name: 检查构建产物
        run: |
          if [ ! -d "dist" ]; then
            echo "❌ 构建失败"
            exit 1
          fi
          echo "✅ 构建成功"

  deploy-production:
    name: "部署到生产环境"
    runs-on: ubuntu-latest
    needs: quality-check
    environment: production
    
    steps:
      - name: 检出代码
        uses: actions/checkout@v4
      
      - name: 设置Node.js环境
        uses: actions/setup-node@v4
        with:
          node-version: ${{ env.NODE_VERSION }}
          cache: 'yarn'
      
      - name: 安装依赖
        run: yarn install --frozen-lockfile
      
      - name: 构建生产版本
        run: NODE_ENV=production yarn build
      
      - name: 部署到GitHub Pages
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./dist
          publish_branch: gh-pages
          force_orphan: true

3. 路由刷新问题解决方案

问题描述

Vue项目部署到GitHub Pages后，浏览器刷新会出现404错误。

解决方案

1. 创建404.html重定向文件

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Vue App</title>
  <script>
    sessionStorage.redirect = location.href;
  </script>
  <meta http-equiv="refresh" content="0;URL='/'" />
</head>
<body></body>
</html>

2. 修改index.html添加路由处理

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue2 Element Project</title>
  <script>
    // 处理GitHub Pages路由刷新问题
    (function() {
      var redirect = sessionStorage.redirect;
      delete sessionStorage.redirect;
      if (redirect && redirect != location.href) {
        history.replaceState(null, null, redirect);
      }
    })();
  </script>
</head>
<body>
  <div id="app"></div>
</body>
</html>

3. Vue Router配置

// src/router/index.js
import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  mode: 'history',
  base: process.env.NODE_ENV === 'production' 
    ? '/vue2-element-project/' 
    : '/',
  routes: [
    // 你的路由配置
  ]
})

4. GitHub 关键配置

SSH密钥配置

# 生成SSH密钥
ssh-keygen -t rsa -b 4096 -C "your-email@example.com" -f ~/.ssh/id_rsa

# 复制公钥到GitHub
cat ~/.ssh/id_rsa.pub

GitHub Pages设置

仓库设置 → Pages → Source选择gh-pages分支
自定义域名（可选）
启用HTTPS

GitHub Actions权限

需要启用读写权限：Settings → Actions → General → Workflow permissions
勾选"Read and write permissions"

5. 部署验证流程

自动化验证脚本

# 在deploy.yml中添加验证步骤
- name: 部署后验证
  run: |
    echo "等待部署完成..."
    sleep 60
    
    # 检查网站可访问性
    STATUS=$(curl -s -o /dev/null -w "%{http_code}" https://xiaoxcx.github.io/vue2-element-project/)
    if [ "$STATUS" = "200" ]; then
      echo "✅ 部署成功"
    else
      echo "❌ 部署异常，状态码: $STATUS"
      exit 1
    fi

6. 故障排除指南

常见问题及解决方案

构建失败
- 检查Node.js版本兼容性
- 验证package.json依赖
- 查看GitHub Actions日志
部署后页面空白
- 检查publicPath配置
- 验证资源路径是否正确
- 查看浏览器控制台错误
路由刷新404
- 确保已配置404.html
- 检查Vue Router的base配置
- 验证GitHub Pages设置
SSH认证失败
- 重新生成SSH密钥
- 检查GitHub公钥配置
- 验证网络连接

📊 部署统计

构建时间: ~30秒
部署时间: ~2分钟
成功率: 99%
访问地址: xiaoxcx.github.io/vue2-elemen…

🔧 技术栈

前端框架: Vue 2.6.14
UI组件库: Element UI 2.15.14
路由管理: Vue Router 3.5.4
构建工具: Vue CLI 5.0.8
CI/CD: GitHub Actions
部署平台: GitHub Pages

📈 性能优化

构建优化: 启用代码分割和压缩
缓存策略: 利用GitHub Actions缓存
CDN加速: GitHub Pages全球CDN
监控告警: GitHub Actions状态通知

作者: xiaoxcx
项目地址: github.com/xiaoxcx/vue…
在线演示: xiaoxcx.github.io/vue2-elemen…