使用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]
大致流程
- master分支更新后,触发GitHub Action
- 打包
- 生成的文件会推送到
gh-pages
分支上
GitHub Settings部分:
GitHub Settings / Actions / General
GitHub Settings / Pages
注意事项:
由于生成的站点是 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
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· DeepSeek “源神”启动!「GitHub 热点速览」
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· NetPad:一个.NET开源、跨平台的C#编辑器