vue-cliでプロジェクトを作ってgithubページで公開する

手順

vue-cliをインストールする(初回のみ)

$ npm install -g vue-cli

プロジェクト名を変数に設定

PJNAME=vuetes

プロジェクトを作成する

質問は全てENTERでOK

$ vue init webpack ${PJNAME}

$ cd ${PJNAME}

jsやcssを相対パスで取得するように変更

build内のassetsPublicPathを修正する

config/index.js

build: {
  :
  assetsPublicPath: '/',
  :

↓

config/index.js

build: {
  :
  assetsPublicPath: '',
  :

github pagesへのデプロイを簡単にするプラグインを追加

$ npm install gh-pages --save-dev

package.jsonを修正

scriptsにdeployを追加する

package.json

"scripts": {
    "deploy": "gh-pages -d dist",
    :
}

コミットする

$ git init
$ git add -A
$ git commit -m "commit"

githubでリポジトリを作ってpushする

$ REPO=$(basename $PWD);
$ GHUSER=$(git config --get user.name);

$ GHPASS=githubパスワードを入力

$ curl -u $GHUSER:$GHPASS https://api.github.com/user/repos -d '{"name":"'$REPO'"}' --fail;
$ git remote add origin [e-mail]:$GHUSER/$REPO.git;
$ git push origin master

github pagesにデプロイする

$ npm run build
$ npm run deploy

動作確認

$ open https://yfujii01.github.io/${PJNAME}/

↓これが出たら成功