Edited at

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の項目がある。

スクリーンショット 2018-10-30 20.04.29.png

Sourceを master branch /docs folder にする。

スクリーンショット 2018-10-30 20.03.08.png


6. 確認

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


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