1.`vue.config.js` に正しい `publicPath` を設定

https://<USERNAME>.github.io/ にデプロイしている場合は、publicPathを省略することができる（デフォルトは "/"のため）。

https://<USERNAME>.github.io/<REPO>/にデプロイしている場合（例えば、リポジトリがhttps://github.com/<USERNAME>/<REPO>にある場合）、publicPathを"/<REPO>/" に設定。

例えば、リポジトリ名が "my-project"の場合、vue.config.js(config/dev.env.js) は次のようになる。


module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/my-project/'
    : '/'
}

2.プロジェクト内で、次の内容で`deploy.sh`を作成し、それを実行してデプロイ

deploy.sh

# !/usr/bin/env sh

# エラー
set -e

# build
npm run build

# 出力されたディレクトリに移動
cd dist

# カスタムドメインにデプロイする場合
# echo 'www.example.com' > CNAME

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

# https://<USERNAME>.github.io にデプロイする場合
# git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git master

# https://<USERNAME>.github.io/<REPO> にデプロイする場合
# git push -f git@github.com:<USERNAME>/<REPO>.git master:gh-pages

cd -

シェルスクリプトファイル（deploy.sh）を実行
chmod 755 deploy.sh
./deploy.sh

これでデプロイが完了です

Reference

https://cli.vuejs.org/guide/deployment.html#github-pages