[Git Note] — Vue3 部署至 GitHub Page 超級淺入遷出

發表於 更新於 分類於 ， ， 文章字數： 1.4k 所需閱讀時間 ≈ 1 分鐘

Introduction & 前言

GitHub Page

使用 GitHub Page 展示你的前端作品，如果你剛好碰上畫面打開一片空白，可以參考此篇筆記。

因為步驟滿簡單的，這邊就簡短敘述了(但過程踩了很久的坑)。

建立 Repository

Your Repositiories

首先進入 GitHub 後點擊右上角的人像圖片，然後再點擊 Your repositiories。

New Repositiory

接著點擊綠色按鈕 New 一個新的 Repositiory。

接著建立好之後就把你的專案 Init 然後 git remote 到你的 Repositiory，這邊就不詳加贅述了。

建立 Vue.config.js

接著看你的 Vue Cli 版本：

  1. Vue Cli 2.x
1
2
3
4
5
// /config/index.js

module.export = {
  baseUrl: '/請替換這邊為 Repositiory 的名稱/'
}
  1. Vue Cli 3.x
1
2
3
4
5
// vue.config.js

module.export = {
  baseUrl: '/請替換這邊為 Repositiory 的名稱/'
}
  1. Vue Cli 4.x
1
2
3
4
5
// vue.config.js

module.export = {
  publicPath: '/請替換這邊為 Repositiory 的名稱/'
}

注意：如果之後到 GitHub Page 上查看是一片空白，可以再試著修改一下這邊的路由，試試看把 '/請替換這邊為 Repositiory 的名稱/' 修改為 './'

Vue3 確保 Vue router 的模式正常

Vue Router

如果你是 Vue3 請確定這隻檔案 /src/router/index.ts 裡面的一段程式碼：

1
2
3
4
const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
});

這邊請確保 createWebHistory 裡面有帶上變數 **process.env.BASE_URL**，如果沒帶可能也會一片空白。

如果還是一片空白可以試著把 process.env.BASE_URL 拿掉，或許會出現，這邊筆者按照上面的方式成功顯示頁面，但其他人有把 process.env.BASE_URL 拿掉，且 publicPath 並沒有加上 Repositiory 的名稱，所以都可以試著改看看。

快速部署

最後這邊還是要來推一下之前的文章 **[Git Notes] — 快速部署 Vue Cli 靜態資源至 GitHub Pages**，如果你不想要每次都一直 git add 後推上去 GitHub 才能看到結果，或是想把 資源 和 編譯出來的成品 分開，也推薦使用這個方法。

Conclusion & 結論

因為這次要提交某間公司的面試題目，剛好題目需求是需要使用框架跟前端單元測試，所以才會選擇使用 Vue3+TS+JE，但建立 GitHub Page 之後就一直一片空白，後來發現是 vue-router 那邊的東西顯示不出來，修修改改後才發現最主要是上面說的 vue router 跟 publicPath 這兩個問題。

最後還是要感謝六角的助教 Ray，剛好在群組發問時被認出來，後來也私下透過 Slack 幫助解決問題，大力感謝。

參考網站