vue-cliで作ったアプリをGithub Pagesにデプロイ

1. いつもどおり vueのプロジェクトをつくる

$ vue init webpack <projectname>

2. config/index.js 内の buildメソッドを編集する

• dist/ を docs/ に変える (2箇所)
• assetsPublicPath を / から ./ に変える

  build: {
    // Template for index.html
-    index: path.resolve(__dirname, '../dist/index.html'),
+    index: path.resolve(__dirname, '../docs/index.html'),

    // Paths
-    assetsRoot: path.resolve(__dirname, '../dist'),
+    assetsRoot: path.resolve(__dirname, '../docs'),
    assetsSubDirectory: 'static',
-    assetsPublicPath: '/',
+    assetsPublicPath: './',

3. ビルドする

$ mkdir docs
$ npm run build

4. ふつうにGithubにデプロイ

$ git add -A
$ git commit -m "<commit-message>"
$ git push origin master

5. Github側でデプロイ設定する

settingsタブの中に Github Pagesの項目がある。

Sourceを master branch /docs folder にする。

6. 確認

https://あなたのGithub垢.github.io/レポジトリの名前/　をチェック。

例えばこんなURL： https://msrks.github.io/boardgame-manager/