vue-cliでビルドしたプロジェクトをgh-pagesにデプロイする
vue-cliでcreateしたプロジェクトは、そのままビルドすると、出力されたdist/index.htmlが/js/vendor.a58fe84b.jsのように、絶対パスでアセットを読みに行く。
基本的にはこれで構わないケースが大半だけれど、Github Pagesにデプロイしたい場合は例外で、プロジェクト名と同じサブディレクトリ下に配置されてしまう。そうなると絶対パスから見に行くと404になってしまい、ページは動作しない。
相対パスからアセットを読みに行くようにする
こういったケースはbaseUrlオプションを設定することで回避出来る。下記のファイルを作成する。
vue.config.js
module.exports = {
baseUrl: "./"
};
こうすると、（先の例でいうと）index.htmlが./js/vendor.a58fe84b.jsを読みに行くようになる。
アセットが色々存在するケースでは確認していないので、これではダメなケースもあるかもしれない。
vue.config.jsについては公式のドキュメントを参照のこと。
デプロイ
デプロイはどうするかというと、gh-pagesというツールを入れるのが楽。
#インストール $ yarn add gh-pages --dev
でインストールした後、package.jsonのscriptsに下記の行を追加する。
"deploy": "gh-pages -d dist"
あとはyarn deployを実行するだけ。
動きとしては、まっさらなgh-pagesブランチを作成して、dist下のファイルをすべて配置するのと同じになる。
Github pagesはmasterやdocsフォルダをそのままWebページとして公開出来るように最近なっているが、ビルド成果物をコミットに含めたくない場合は、firebase hostingのようなホスティングサービスを使うか、旧来のgh-pagesブランチを使う形にするのが良いと思う。ちなみにこのやり方はegoist先生がやってたやり方。
