Github Action自动化部署Vue3项目

介绍

---

Github Action是一个CI/CD工具，它的功能很多，比如 自动化部署node 等。 也可以认为它是一个可以白嫖的docker容器

部署教程

---

ACTION主要是载体是脚本，你需要在项目 .github/workflows 创建脚本。

如：

开始之前，你需要做一件事：

在vite.config.ts文件设置base为 './',

import { defineConfig } from 'vite'

import vue from '@vitejs/plugin-vue'



// https://vite.dev/config/

export default defineConfig({

  plugins: [vue()],

  base: './' // 打包路径

})

1. 编写脚本

# .github/workflows/auto-deploy.yml

name: auto deploy 🚀

on:
  # 监听push操作
  push:
    branches:
      - main # 这里只配置了main分支，所以只有推送main分支才会触发以下任务
  pull_request:

  # 这个选项可以使你手动在 Action tab 页面触发工作流
  # workflow_dispatch:

permissions:
  # 允许对仓库的内容进行写操作。包括创建、修改和删除文件、目录以及提交更改等
  # 这里只配置了push，所以只有推送main分支才会触发以下任务 
  contents: write
  # 允许管理 GitHub Pages 服务并对其进行写操作
  pages: write


jobs:
  # 任务ID
  build-and-deploy:
    # 运行环境
    # runs-on: macos-latest
    # runs-on: windows-latest
    runs-on: ubuntu-latest
    concurrency:
      group: ${{ github.workflow }}-${{ github.ref }}

    # 步骤
    steps:
      # 官方action，将代码拉取到虚拟机
      - name: Checkout
        uses: actions/checkout@v3

      # 建一个名为setup-node的步骤（安装指定版本的Node.js）
      - name: setup-node 
        # 使用setup-node@v3这个action
        uses: actions/setup-node@v3
        # 指定某个action 可能需要输入的参数
        with:
          node-version: '22.x'

      # 安装 pnpm
      - name: Install pnpm
        run: npm install pnpm -g

      # 安装依赖  
      - name: Install dependencies
        run: pnpm i
      # 打包
      - name: Build application 🔧
        run: pnpm build

      # 部署 https://github.com/JamesIves/github-pages-deploy-action
      - name: Deploy 🚀
        uses: JamesIves/github-pages-deploy-action@v4
        if: github.ref == 'refs/heads/main'
        with:
          token: ${{ secrets.GITHUB_TOKEN }}
          branch: gh-pages  # default: gh-pages
          folder: dist
          clean: true # Automatically remove deleted files from the deploy branch
          # commit-message: ${{ github.event.head_commit.message }} # default: `Deploying to gh-pages from @ 3238feb 🚀`
          # commit-message: "deploy: ${{ github.sha }} (${{ github.event.head_commit.message }}) 🚀 "

2. 生成秘钥

3. 测试

git pull
git add .
git commit -m "xxx"
git push -u origin main