使用GithubActions發布Vue網站到GithubPage

本文轉載自查看原文 2020-10-15 16:36 454

偶然看到一個介紹使用GitHubAction做的百度貼吧自動簽到，然后一路順藤摸瓜看到了阮一峰大神寫的GitHub Actions 入門教程中介紹，示例中介紹了把React項目發布到GitHub Pages，我就想能不能把vue的項目發布到GitHub Pages呢(主要是不會React)。
說干就干。

創建vue項目

這個不講了用vue-cli一個命令就可以了。現在我已經創建了一個ts模板的項目（js項目是一樣的），項目名稱叫vue-github-actions-demo，結構如下。你們初始化的項目可能有些文件沒有，如果是我后面添加發布流程文件我會講到，如果是vue原生文件的差異不影響發布流程。
ci.yml

創建配置文件

從cli3開始取消了自動創建配置文件，這里需要手動創建配置文件，創建配置文件主要是因為我的githubPage主頁，已經有一個網站了(https://dashenxian.github.io)，所以我只能用項目地址訪問https://dashenxian.github.io/vue-github-actions-demo/，如果這里我不加這個二級目錄，vue對js文件的文件引用就有問題。如果你想用你的githubPage主頁訪問，這一步驟可以跳過，但是需要把項目名稱改成你的github用戶名稱。
在根目錄下創建vue.config.js文件，添加如下代碼：

//vue.config.js
module.exports = {
    // 選項...
    publicPath: process.env.NODE_ENV === 'production'
    ? '/vue-github-actions-demo/'
    : '/'
  }

vue.config.js

創建workflow（工作流程）

在根目錄逐級創建.github\workflows目錄，在workflows下創建yml工作流程文件，文件名稱可以隨意，githubActions會執行全部的yml流程。
輸入以下代碼：

name: GitHub Actions Build and Deploy Demo
on:
  push:
    branches:
      - master
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout 🛎️
        uses: actions/checkout@v2.3.1 # If you're using actions/checkout@v2 you must set persist-credentials to false in most cases for the deployment to work correctly.
        with:
          persist-credentials: false

      - 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: | #注意我這里是使用的yarn管理包，如果你使用的npm，請換成npm的命令：npm install和npm run build
          yarn
          yarn build
      - name: Deploy 🚀
        uses: JamesIves/github-pages-deploy-action@3.6.2
        with:
          ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }} #secrets.ACCESS_TOKEN是項目配置的密鑰
          BRANCH: gh-pages # The branch the action should deploy to.
          FOLDER: dist # The folder the action should deploy.
          CLEAN: true # Automatically remove deleted files from the deploy branch

ci.yml