Vue 也可以跑在 GitHub

事實上要執行 Vue,並不一定花錢找特定網站空間或主機,只要放在 GitHub 即可。

Version


Vue 2.5.17
Vue CLI 3.2.1

Vue File


HelloWorld.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<template>
<div>
<ul>
<li v-for="(item, index) in todos" :key="index">
{{ item.id }} : {{ item.title }}
</li>
</ul>
</div>
</template>

<script>
import axios from 'axios';

const url = 'https://jsonplaceholder.typicode.com/todos';

const data = () => ({
todos: [],
});

const mounted = function() {
axios.get(url)
.then(res => this.todos = res.data.slice(0, 3));
};

export default {
name: 'HelloWorld',
data,
mounted,
};
</script>

一個最簡單的 Vue,從 API Server 抓資料並顯示。

建立 GitHub Repository


github000

  1. 選擇 New repository 建立新的 repository

github001

  1. 輸入 repository 名稱:vue-github
  2. Create repository 建立新的 repository

vue.config.js


1
2
3
4
5
module.exports = {
baseUrl: process.env.NODE_ENV === 'production'
? '/vue-github/'
: '/',
};

在 project 根目錄建立 vue.config.js 設定 baseUrl

因為剛剛建立了 vue-github repository,將來目錄會如 https://oomusou.github.io/vue-github,因此設定 baseUrl/vue-github

Deployment Script


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
#!/usr/bin/env sh

# abort on errors
set -e

# build
yarn build

# navigate into the build output directory
cd dist

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

git push -f git@github.com:oomusou/vue-github.git master

cd -

在 project 根目錄建立 deploy.sh,負責 build Vue project,將 dist 目錄下所有檔案 push 到 GitHub。

git push 下修改 git repository 為 vue-github.git,其 branch 為 master

Q : 為什麼要另外建立 deploy.sh ?

因為 yarn build 時,會砍掉 dist 目錄,因此原本的 git repository 也會消失,將無法再次 push,所以必須每次重新建立 git repository 再 push。

1
$ sh ./deploy.sh

執行 deploy.sh build project 與 push 到 GitHub。

github002

設定 GitHub Repository


github003

  1. vue-github repository 右上角按下 Settings

github004

  1. 移至 GitHub Pages 區段
  2. 選擇 master branch 按下 Save

github005

  1. 會出現可用網址
  2. 若想支援 HTTPS,可選擇 Enforce HTTPS

github006

  • 順利將 Vue project 部署到 GitHub 執行

Conclusion


  • 要順利執行 Vue,並不用到處找空間,只要放在 GitHub 即可,也支援 HTTPS

Sample Code


完整的範例可以在我的 GitHub 上找到

Reference


Vue CLI 3, Deployment

2018-12-21