佈署 vue 到 GitHub Pages：404 頁面

文 / 西打藍 Siddharam

前言

想將 vue SPA 專案佈署到 GitHub Pages 已經很久了，但有很多問題待解決，所以擱置至今，趁著假日就來做做看。

這個佈署有兩件重要的事要解決，一個是將 build 好的檔案放到 gh-pages 分支；另一個是處理 vouter 切換後，重整頁面會出現 404 的問題。此次目錄如下：

1. gh-pages 分支

2. 404 頁面處理

GitHub Pages

首先，我們要將 vue 專案推上 github，如果對 git 指令不熟，可以參考這篇文章。

第一步，要在 github 建立新的 repository。接著，我們把本地專案推送至遠端：

git init

git add .

git commit -m "first commit"

git remote add origin https://github.com/{{ 你的 github 名稱 }}/{{ repository 名稱 }}.git

上述指令以我自己為範例是：

git remote add origin https://github.com/FrankYeah/market.git

git push -u origin master

接著，我們要新增 vue.confing.js 檔在根目錄，這是為了在 production 時被加載，可以參考文件，裡頭的設定如下：


//vue.confing.js


module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/market/'
    : '/'
}

// 請修改 market 為你的 repository 名稱

這樣一來，你的 webpack 就會幫你的 github pages URL 加上 publicPath。但這個設定對有些人沒效，那麼你可以自己在 webpack config 做些調整：


//config/index.js

  ...
  ...
  ...

  build: {

  ...
  ...
  ...

    assetsPublicPath: '/market/',

  ...
  ...
  ...


// 請修改 market 為你的 repository 名稱

本地的設定告一段落，等等處理 404 頁面的時候再回來。接著，我們要把 build 好的 dist 資料夾檔案推上 gh-pages：

cd dist

git init

git add .

cd commit -m 'build file'

git push -f https://github.com/FrankYeah/market.git master:gh-pages

最後，我們到 github 頁面，選擇自己的 repository，點選 Settings 後，往下滑到 GitHub Pages 點 Choose a theme 再按確認，就能建立好靜態頁面了。

404 頁面處理

如果你有做 router 切換，會發現重整時，會返回 404，這是因為你的路徑不存在，vue 只是切換 component 而已。這裡提供兩個做法：

1. 自己手動複製 404.html 到 github 上，內容只要照搬 index.html 就好。

2. 是到 vue router 做設定：


//router/index.js

export default new Router({
  mode: 'hash',
  base: '/market',

...
...
...

主要是透過 hash 的做法來解決，如果是設定 history mode 的話，就會有問題。

如果不是用 github pages，而是用 nginx 的話，只要再 try_files 設定 404 頁面指向 index.html 就好，原理和第一個解法一樣。

最後提供 github 讓大家參考端詳：github、github pages。

閱讀量次

聯絡與合作

訂閱電子報，領「我當前 10+ 以上收入源有哪些」一文。

有文字採訪、網站開發，或是諮詢需求，皆可至個人網站參考作品，並聯繫 IG。

或是想分享心情、聊聊天、交朋友，可以來秘密通道找我唷。

Email: frank@siddharam.com

前言

1. gh-pages 分支 2. 404 頁面處理

GitHub Pages

404 頁面處理

聯絡與合作

1. gh-pages 分支

2. 404 頁面處理