LearningSky.io

【 Cloud 】將 Vue 部署到 GitHub Pages

Archer -

內容

  • 學習目標
  • 前置準備作業
  • 流程
  • 部署 Vue App 到 GitHub
  • 設定 GitHub Pages
  • 驗證部署結果

學習目標

  • 如何將 Vue 部署到 GitHub Pages

前置準備作業

  • 已建立 GitHub 帳號並能正常登入
  • 一個在本地端電腦可執行的 Vue App
  • 已於電腦端安裝 IDE，本範例使用 Visual Studio Code

流程

  • 在本地端電腦建立 hello-vue-app 的 Vue 專案並設定 Config
  • 專案打包
  • 將打包完的專案 Commit 到 GitHub 上所建立名為 hello-vue-app 的 Repository
  • 設定 GitHub Pages
  • 驗證部署結果

部署 Vue App 到 GitHub

Step 1. 建立 Vue Config

  • 請在 Vue 專案建立 vue.config.js 並輸入下方內容

Step 2. Build Vue App

  • 在終端機輸入下方指令
npm run build

Step 3. 部署 Vue 到 GitHub

  • 在自己的 GitHub 中建立名為 hello-vue-app 的 Repository

  • 請將本地端電腦中的 hello-vue-app 專案資料夾中 dist 目錄中所有檔案 commit 到 GitHub 中 hello-vue-app 的 Repository，commit 完結果如下

設定 GitHub Pages

Step 1. 點選 Settings

Step 2. 啟用 GitHub Pages

  • 點選左側的 Options > 往下滑到 GitHub Pages 區段點選 Check it out here!

  • 點選 Source 中下拉選單裡的 main

  • 點選 Save

驗證部署結果

Step 1. 開啟 URL

  • 點選 GitHub Pages 所產生的 URL

Step 2. 驗證部署結果

GitHub

List of blogs