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

文档

• https://github.com/marketplace/actions/deploy-to-github-pages
• https://cli.vuejs.org/zh/guide/deployment.html#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/

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