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
これでデプロイが完了です