はじめに
vue-cliで作ったvueプロジェクトをbuildして、
GithubPagesへデプロイするまでの走り書きです。
GithubPagesがサブパスへのデプロイになるので、
コンパイル設定をする必要があることに気づかなくてちょっと詰まったので残しておきます。
https://github.com/k-karen/test-app
https://k-karen.github.io/test-app/index.html
1. repository作成 & git clone
githubでrepositoryを作成。
git clone https://github.com/k-karen/test-app.git
とかでCloneしてくる
2. vue create ~ build
cloneしたrepository配下までcdしてから
# レポジトリ名と同じ名前のアプリでいいなら、vue create . でOK。
# オプションは適当でOKだと思います(babel,PWAをマニュアルで選択して私は行いました)
vue create .
# 下記のファイルを作る
vi vue.config.js
# buildの設定を作ったらbuildする
yarn build
# git add -A & git push origin headとかで適当に今までの変更をgithubへpush
// publicPathはRepositoryNameにしてください
module.exports = {
publicPath: 'test-app',
outputDir: 'docs'
}
3. githubの設定
github上のSettingsからGitHub Pages の Source を master branch /docs folder
にする。
https://k-karen.github.io/test-app/index.html
と反映できたことが確認できたかと思います。
最後に
vue-cliでのbuild時のコンパイルは、サブパス想定じゃないので、
publicPathを設定する必要があるっぽいです。
詳しくはこちらを御覧ください
outputDirをdocsにしているのは、GithubPageのsourceにdocsのディレクトリを指定できるからです。
gh-pages
をいうブランチを作り、そのブランチに、buildしたファイルのブランチを作れば、outputDirを変えなくてもgithubPagesにデプロイできるみたいです。