這是我第一次學習 Vue.js ,在專案寫完之後想將專案放到 GitHub 上,並且將網頁使用 GitHub Pages 展示出來,在部署網頁過程遇到一些問題,就記錄步驟與解決方法。

一般上傳到 GitHub Pages 都是將程式編譯成 HTML 後,將網頁上傳到 gh-pages 就能夠馬上有一個靜態網頁使用,使用的步驟大概如下:

npm run build

cd dist

git init
git add -A
git commit -m 'deploy'

git push -f git@github.com:<USERNAME>/<REPO>.git master:gh-pages

但是如果要重新上傳又必須重新執行上面幾段程式,是不是會很麻煩呢 因此,如果將上面程式寫成腳本就可以快速上傳了,並且官方的教學上也這麼教的喔(點此觀看)。

那麼底下就正式來將網頁上傳到 GitHub Pages 吧

靜態網頁上傳至 GitHub Pages

在上傳到 GitHub Pages 之前,要注意如果是上傳到 https://<USERNAME>github.io 就不會有路徑問題,而如果是 https://<USERNAME>.github.io/<REPO>的話就會有路徑的問題,在嘗試發佈過網頁會發現 index.html 的 css 或 js 都是在網頁的根目錄,但是我們的網頁目錄是在 /<REPO>/ ,會造成 css 跟 js 無法載入的錯誤。

因此,處理的方式是判斷當執行 npm run build 的模式狀態為 production 時,就會自動帶入路徑位置,就必須更該腳本的執行指令,在專案打開 package.json , 將 build 執行的命令後面增加 –mode production ,如下:

{
  "name": "animal-shelter-map",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build --mode production", // 增加--mode production
    "lint": "vue-cli-service lint"
  },

再來在專案目錄編輯 vue.config.js ,如果沒有該檔案直接新增就好了,輸入底下的程式,主要是判斷執行的模式是否為 production 就帶入路徑位置。

module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/<REPO>/'  // <REPO> 是github的專案名稱
    : '/'
}

這麼一來上傳的 css / js路徑就會變 /<REPO>/css/ 了,css 與 js 的載入就會成功了,之後再寫腳本一鍵上傳至 GitHub Pages ,參考下面的程式。

在專案目錄建立 deploy.sh 檔案。

vim deploy.sh

裡面寫底下幾行程式。

#!/usr/bin/env sh

# abort on errors
set -e

# build
npm run build

# navigate into the build output directory
cd dist

git init
git add -A
git commit -m 'deploy'

git push -f git@github.com:<USERNAME>/<REPO>.git master:gh-pages

cd -

在每次部署時只要執行 sh deploy.sh ,就會自動上傳了,底下次我第一次用 Vue.js 寫的寵物收容所地圖,也是用此方法上傳的,我的 Vue.js 還不是很熟練,希望日後可以更加純熟阿

GitHub: https://github.com/MtFeather/animal-shelter-map

參考資料:

rHuei

一個喜歡亂玩亂弄的工程師。

Leave a comment

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *