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 项目。
