vue3 - 前端 Vue 项目提交GitHub 使用Actions自动化部署

GitHub Demo 地址

在线预览

参考文章
使用GithubActions发布Vue网站到GithubPage
使用Github Actions将Vue项目部署到Github Pages
前端使用github pages 部署自己的网站
GitHub Actions自动化部署前端项目指南

前言

vue前端项目写好之后，想部署到线上通过在线地址进行访问，可以通过gitee或者GitHub的pages
这里是手动部署的方法:Vue - vue项目打包部署到Github的pages在线访问

自动化部署需要的准备工作

在项目中设置路径

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

添加gh-pages分支

新增一个代码分支，命名为gh-pages，如果不是空白分支，把分支多余的代码删掉
然后复制dist里面的文件（不要dist文件夹）到项目根目录
提交代码到分支

设置pages

进入GitHub-项目-settings-pages设置，即可得到在线预览地址

创建自动部署的文件

在项目根路径创建.github\workflows\auto-deploy.yml文件

# .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: '16.x'

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

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

      # 部署 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 }})  "

获取密钥并存储到Github仓库中
创建密钥
进入Github的Settings中https://github.com/settings/，依次点击Developer settings、Personal access tokens。然后点击Generate new token创建。因为要操作仓库，所以需要勾选repo权限。

具体请参考：github 创建个人访问令牌

请及时保存生成的密钥

将密钥存储到Github仓库

首先创建一个Github仓库，然后到仓库的Settings/Secret下，点击New repository secret将刚才保存的密钥保存，并命名为ACCESS_TOKEN（注意，如果这里的命名更改了，前面的yml文件中的${{ secrets.ACCESS_TOKEN }}也要更改）

完成这些步骤后，当你将新代码推送到 GitHub 仓库的主分支（通常是 main）时，GitHub Actions 将会自动运行，并将构建后的静态文件部署到 gh-pages 分支。然后，你可以通过访问 https://<用户名>.github.io/<仓库名称>/ 来查看部署好的 Vue 项目。