Vue 初心者筆記 #45 將 Vue CLI 4 專案部署到 GitHub Pages

本文介紹如何透過圖形化介面建置 Vue CLI 4 的環境,以及當我們完成專案後,該如何把專案部署為 GitHub 的靜態網頁。

安裝與建置環境

安裝 Vue CLI

基本上按照官方文件上的步驟就能成功安裝,這邊就簡單描述一下:

  1. 確認自己的 Node.js 版本是否在 8 以上
  2. 下載並安裝 Vue CLI:npm install -g @vue/cli
  3. 完成後檢查版本:vue --version(寫這篇文章的時候是 4.x 版)

官方文件:安裝 | Vue CLI

使用 GUI 創建專案

建置 Vue CLI 4 的方式有兩種,第一個是直接透過終端機輸入指令,另一個是藉由 Vue CLI 提供的圖形化介面來創立與管理專案。
這兩種方式都可以用,結果也相同,只是我本身比較喜歡看 GUI 介面,所以選擇後者。

  1. 創建專案:vue ui
  2. 接下來會打開預設瀏覽器,以圖形化介面引導完成專案的建置
  3. Tasks 的 serve 可以在本地端啟動專案
  4. Tasks 的 build 可以在目錄下創建 dist 資料夾,通常用於網站的部署

對了,GUI 有提供查詢插件的功能,我們可以在此查詢要使用的插件並載入專案內,當然也能透過終端機的指令安裝。

專案依賴插件

補充一個雷點:在使用 build 打包專案之前,建議到專案設定裡面更改檔案路徑,將公開路徑的 / 改成 ./,避免後續在部署網站時出現讀不到檔案的錯誤。

更改公開路徑

部署 GitHub Pages

完成專案後,如果我們需要將網站正式上線,最簡單的方式就是透過 GitHub 部署一個靜態網站。
首先,我們要將整個 Vue.js 專案 Push 到一個新的 Repository 上面,接著執行以下幾個步驟,就成功架設靜態網站哩:

  1. 在 GUI 介面中,使用 Tasks 裡的 build 將專案打包,檔案將放置於目錄下的 dist 資料夾
  2. 把終端機的位置移動到 dist 資料夾上:cd dist
  3. 建立初始化資料庫:git init
  4. 將所有檔案加入索引(意即加入版本控制):git add .
  5. 輸入 commit 訊息:git commit -m 'init'
  6. 將 dist 資料夾更新至遠端資料庫:git push -f 'RemoteURL' master:gh-pages

其中第六點的 RemoteURL 指的就是專案 Repository 的 URL。
例如:git push -f https://github.com/Sealman234/XXX.git master:gh-pages

這個指令會建立一個遠端分支叫做 gh-pages,並把 dist 資料夾更新上這個分支,而 gh-pages 分支也會自動作為 GitHub Pages 的應用來源。
接著到 Settings 裡面就能找到 GitHub Pages 的網址囉!

Settings GitHub Pages

參考文章

  1. Vuejs 部屬 GitHub Pages | Welcome.Web.World

以上資源是我自己整理過後的筆記,若有錯誤歡迎隨時和我聯繫。