使用Github Action在Github Pages上部署vue页面

Github Action部分:

name: NodeJS
on:
push:
branches: [ "master" ]
# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
permissions:
contents: write
# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
concurrency:
group: "pages"
cancel-in-progress: false
jobs:
build-and-deploy:
runs-on: ubuntu-latest
steps:
- name: Checkout 🛎️
uses: actions/checkout@v3
- name: Install and Build 🔧 # This example project is built using npm and outputs the result to the 'build' folder. Replace with the commands required to build your project, or remove this step entirely if your site is pre-built.
run: |
npm install
npm run build
- name: Deploy 🚀
uses: JamesIves/github-pages-deploy-action@v4
with:
folder: dist # 打包生成的文件夹
# branch: [自定义分支名,默认gh-pages]

大致流程

  1. master分支更新后,触发GitHub Action
  2. 打包
  3. 生成的文件会推送到 gh-pages 分支上

GitHub Settings部分:

GitHub Settings / Actions / General
image

GitHub Settings / Pages
image

注意事项:

由于生成的站点是 https://[name].github.io/[repository],
所以打包生成的index.html中,引用为 /assets/xxxx.js 这种将会404。

// vite.config.ts 中设置
base: './',

https://vitejs.cn/vite3-cn/guide/static-deploy.html#github-pages

posted @   复制粘贴机器人  阅读(88)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· DeepSeek “源神”启动!「GitHub 热点速览」
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· NetPad:一个.NET开源、跨平台的C#编辑器
点击右上角即可分享
微信分享提示