はじめに

Vue CLI + Vue Router で作成したプロジェクトを GitHub Pages で公開する方法についてまとめた。

TL;DR

  • vue create 時点で Vue Router を使う設定にしておくと楽
  • vue.config.js でビルドファイルの出力先などを設定
  • ビルド＆プッシュしてリポジトリの設定を変更すれば OK
この記事が参考になった方
ここかここからチャージや購入してくれると嬉しいです(ブログ主へのプレゼントではなく、ご自身へのチャージ)
欲しいもの / Wish list

目次

  1. はじめに
  2. TL;DR
  3. 環境・条件
  4. 詳細
    1. プロジェクト作成
    2. リポジトリ作成
    3. vue.config.js 作成
      1. publicPath
      2. outputDir
      3. filenameHashing
      4. productionSourceMap
    4. ビルド & プッシュ
    5. リポジトリの設定変更
    6. ハマりどころ
  5. まとめ
  6. その他・メモ
  7. 参考文献

環境・条件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$ sw_vers
ProductName:	Mac OS X
ProductVersion:	10.15
BuildVersion:	19A602

$ node -v
v12.7.0

$ npm -v
6.10.3

$ vue -V
3.10.0

$ npm ls vue
vue@2.6.10 | MIT | deps: none | versions: 250

$ npm ls vue-router
vue-router@3.1.3 | MIT | deps: none | versions: 65

詳細

プロジェクト作成

vue create で作成。この時点で Vue Router を使う設定にしていると楽。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$ vue create github-pages-example-with-vue-router

Vue CLI v3.10.0
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, CSS Pre-processors, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass)
? Pick a linter / formatter config: Prettier
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)Lint on save
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? No
...

$ cd github-pages-example-with-vue-router

リポジトリ作成

hub コマンド使ってるけど、普通に Create a New Repository からで良い。

1
2
3
$ hub create github-pages-example-with-vue-router
Updating origin
https://github.com/17number/github-pages-example-with-vue-router

vue.config.js 作成

1
2
3
4
5
6
module.exports = {
  publicPath: '/github-pages-example-with-vue-router',
  outputDir: 'docs',
  filenameHashing: false,
  productionSourceMap: false,
}

publicPath

個別ブランチを GitHub Pages で公開する場合 https://<username>.github.io/<repository>/ に JS やらの assets が展開される。

publicPath 未指定の場合、ドメイン直下(https://<username>.github.io/)に assets がある体のコードが出力されてしまい、JS ファイルなどを読み込めないためリポジトリ名を設定する。

outputDir

リポジトリ単位の GitHub Pages の公開パターンは、「ブランチ直下」か「docs 配下のみ」かを選べる。

今回は docs 配下のみを表示対象にしたいので、ビルドファイルの出力先を docs に指定。デフォルトだと dist に出力される。

filenameHashing

設定しなくても大丈夫だが、ビルドのたびにファイルリネーム扱いになるのが気持ち悪いので false に設定する。

productionSourceMap

設定しなくても大丈夫だが、一応 false に設定する。

ビルド & プッシュ

npm run build でビルド

1
$ npm run build

ビルド成功したらリポジトリにプッシュ。

1
2
# hub コマンドで作ってなければ git remote add で追加してからプッシュ
$ git push -u origin HEAD

リポジトリの設定変更

https://github.com/<username>/<repository>/settings に移動し、GitHub Pages セクションで master branch /docs folder を選択。

しばらく待つと https://<username>.github.io/<repository>/ で表示できるようになるはず。

ハマりどころ

vue create 時点では Vue Router を選択しておらず後から手動(npm i vue-router とか)で追加したような場合、new VueRouter の base オプションの追加を忘れないように注意。

1
2
3
4
5
const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,  // これ
  routes
})

まとめ

  • vue create 時点で Vue Router を使う設定にしておくと楽
  • vue.config.js でビルドファイルの出力先などを設定
  • ビルド＆プッシュしてリポジトリの設定を変更すれば OK

その他・メモ

GitHub Pages めっちゃ便利

参考文献

関連記事

この記事が参考になった方
ここかここからチャージや購入してくれると嬉しいです(ブログ主へのプレゼントではなく、ご自身へのチャージ)
欲しいもの / Wish list