LoginSignup
0

More than 3 years have passed since last update.

vue createからGithub Pagesへ反映させるまで

Posted at

はじめに

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
vue.config.js
// 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にデプロイできるみたいです。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0