vue routerを使ったプロジェクトをgithub pagesで公開するためのbuild方法は誰も教えてくれない

作成し終わってbuildはできたはいいけど、そのまま公開したら真っ白なページが表示される。
相対パス指定でbuildしてもローカルでは表示されるのに、github pagesで真っ白になる。
そんなお悩みを抱えたあなたに送る忘備録。

環境

Vue Cli 3
vue-router 4
すでに公開用のリポジトリは作成している

step 1 vue.config.jsを作成

プロジェクトフォルダにvue.config.jsを作成。

vue.config.js

module.exports = {
  publicPath: '/', //Default
  outputDir: 'dist' //Default
}

step 2 publicPathとoutputDirを変更

publicPathは/リポジトリ名に、outputDirはdocsに変更する。

vue.config.js

module.exports = {
  publicPath: '/sample-name', //リポジトリ名
  outputDir: 'docs' //docs
}

step 3 buildする

変更が済んだらyarn or npmでbuildする。
buildが済めばプロジェクトフォルダ配下にdocsのディレクトリが作成される。
これでgithub pages用のdeployファイルが完成。

step 4 docsのディレクトリをmasterにpushして公開

pushの形はお好きに。
docsのディレクトリを外に持ち出して別のgitでpushするもよし。プロジェクトの中でpushするもよし。
pushができたら、github pages側で設定して公開をする。
公開方法はこの記事が簡単でわかりやすかった。

約3時間格闘して公開されたページはこちら
https://nekogakuruga.github.io/vue-samplesite/