利用workflows工作流Actions自动部署Vue项目Deploy to GitHub Pages

简介: 利用workflows工作流Actions自动部署Vue项目Deploy to GitHub Pages

文档

目录

使用GitHub Pages部署一个在线Demo,每次更新代码都要手动打包,切换分支,然后上传到github,感觉太麻烦了,这下有了Actions就可以实现自动部署了

第一步:配置workflows

vue项目中创建文件

# .github/workflows/buildAndDeploy.yml
# 自动发布
# https://github.com/marketplace/actions/deploy-to-github-pages
name: Build and Deploy
on:
  push:
    branches:
      - master
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout 🛎️
        uses: actions/checkout@v2.3.1
      - 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@4.1.1
        with:
          branch: gh-pages # The branch the action should deploy to.
          folder: dist # The folder the action should deploy.

第二步:开启GitHub Pages

在github后台设置 Settings 中选择如下配置,配置完过一会就能看到网站地址了

例如我的:https://mouday.github.io/vue-print/

从现在开始,现在每次推送代码都能自动部署了

image.png


相关文章
|
6月前
|
人工智能 JavaScript 前端开发
Github 2024-10-28 开源项目周报 Top15
本周GitHub热门项目涵盖Svelte、Open Interpreter、PowerShell等,涉及Web开发、AI助手、自动化工具等领域,Python、JavaScript为主流语言,展现开源技术活跃生态。(239字)
681 19
|
6月前
|
人工智能 JavaScript 前端开发
Github 2024-11-04 开源项目周报 Top14
本周GitHub热门项目涵盖屏幕截图转代码、网页监控、低代码开发等。Python与TypeScript主导,亮点项目包括AI生成代码工具、开源社交应用Bluesky及机器人框架LeRobot,展现AI与自动化技术的快速发展趋势。
361 15
|
6月前
|
人工智能 JavaScript Docker
Github 2024-11-11 开源项目周报 Top15
本周GitHub热门项目涵盖多领域:Python与TypeScript领跑,包括屏幕截图转代码、本地文件共享、PDF处理、AI开发代理等。亮点项目如screenshot-to-code、LocalSend、OpenHands及Diagrams,兼具创新与实用性,广受开发者关注。
762 13
|
6月前
|
监控 前端开发 数据可视化
Github 12.3kstar, 3分钟起步做中后台?Go+Vue 脚手架,把权限、代码生成、RBAC 都封装好了
Go-admin 是基于 Gin + Vue 的中后台脚手架,集成 Casbin RBAC 权限、JWT 鉴权、GORM 数据库操作与 Swagger 文档,内置用户、角色、菜单等管理模块。提供代码生成器与表单构建器,支持多租户与多前端框架(Element UI/Arco/Ant Design),3 分钟快速搭建企业级后台,助力高效交付。
541 4
|
6月前
|
人工智能 算法 JavaScript
Github 2024-10-14 开源项目周报 Top14
本周GitHub热门项目共14个,Python项目占7席。涵盖算法实现、生成式AI、金融分析、目标检测等领域,包括TheAlgorithms系列、OpenBB金融平台、Ultralytics YOLO11、Manim动画框架等,展现开源技术多元发展态势。
255 8
|
6月前
|
人工智能 Rust JavaScript
Github 2024-10-07 开源项目周报 Top15
本周GitHub热门项目共15个,Python项目占比最高达7个。榜首为Python算法实现集合TheAlgorithms/Python,Star数超17万;其他亮点包括Godot游戏引擎、OpenBB金融平台、ToolJet低代码框架及新兴AI相关项目如Crawl4AI、Llama Stack等,涵盖游戏、金融、AI、理财等多个领域。
281 4
|
6月前
|
人工智能 Rust 算法
Github 2024-09-30 开源项目周报 Top15
本周GitHub热门项目揭晓:Python主导,AutoGPT居首,涵盖AI、编程、数学动画等领域,助力开发者探索前沿技术。
253 4
|
6月前
|
JavaScript
Vue中如何实现兄弟组件之间的通信
在Vue中,兄弟组件可通过父组件中转、事件总线、Vuex/Pinia或provide/inject实现通信。小型项目推荐父组件中转或事件总线,大型项目建议使用Pinia等状态管理工具,确保数据流清晰可控,避免内存泄漏。
564 2
|
5月前
|
缓存 JavaScript
vue中的keep-alive问题(2)
vue中的keep-alive问题(2)
468 137
|
9月前
|
人工智能 JavaScript 算法
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
1015 0