September 29, 2019

佈署 vue SPA 專案到 GitHub Pages | 處理 404 頁面

vue.config.js 設定


文 / 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 讓大家參考端詳:githubgithub pages





技術文章與合作


有網站設計(UI/UX)、平面設計、網站工程外包需求,皆可以來信詢問,在 關於下方 有參考作品。

想定期收到技術文章,或想一起探討前後端程式的朋友,建議加入 line 群組,或是官方帳號,大家可以互相交流,一起學程式,歡迎加入:

Email: aaa24295234@gmail.com

Line 群組:群組

Line 群組 QR Code:

Line 官方帳號:@184railx

Line 官方帳號 QR Code:



閱讀量