Vue Cli 部署到 Github Pages

Vue Cli 部署到 Github Pages

圖文說明使用 Vue Cli 開發後,如何將 build 出的靜態檔推到 gh-pages 分支,並使用 GitHub Pages 開啟。

流程:

開發完成後,要先設定部署的路徑,再 build 檔案,並部署到 gh-pages 分支。

步驟 1: 設定部署的路徑

這邊設定的 /repoName/ 是指 github 儲存庫的名稱。

Vue Cli 2:

在 config 資料夾中的 index.js 做設定


1
2
3
4
build: {
// ...
assetsPublicPath: '/repoName/',
}

要注意是修改 build 的地方

Vue Cli 3:

在 vue.config.js 中設定 publicPath (如果沒有 vue.config.js 需要自行新增一個)

1
2
3
4
5
module.exports = {
publicPath: process.env.NODE_ENV === 'production'
? '/repoName/'
: '/'
}

步驟 2:build 並部署到 gh-pages 分支

使用 shell

這個方法是我覺得最方便也是最常使用的方法,在 Vue 官方文件中,也是提供這個方法

  1. 新增一個 deploy.sh 到資料夾中
    新增的存放位置可以參考下圖:

  1. 將以下內容加入到 sh 中,並要注意更換 git@github.com:<USERNAME>/<REPO>.git 為自己的儲存庫路徑
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
#!/usr/bin/env sh

# 当发生错误时中止脚本
set -e

# 构建
npm run build

# cd 到构建输出的目录下
cd dist

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

# 部署到 https://<USERNAME>.github.io/<REPO>
git push -f git@github.com:<USERNAME>/<REPO>.git master:gh-pages

cd -

git@github.com:<USERNAME>/<REPO>.git取得可參考下圖:

  1. 在終端機執行 sh deploy.sh

這樣就會成功的部署上去囉!
接下來只要到 gitube 儲存庫上 Settings 中設定 Github Pages 為 gh-pages 要顯示的即可

評論

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×