【 Cloud 】將 Vue 部署到 GitHub Pages

內容

• 學習目標
• 前置準備作業
• 流程
• 部署 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

• ArcherHuang @ GitHub

List of blogs

• https://oranwind.org/author/archer/
• https://learningsky.io/author/archer/