vue-cli で作ったプロジェクトを github pages 用にするときの注意点

何が問題か？

デフォルトだと / になっているため、そのままだとサブディレクトリがつく github pages ではパスが合いません。

よく知られた(不完全な)対処法

ググってみると、相対パスとして生成するように assetsPublicPath を空にする 方法が見受けられました。

それでもだいたい動くのですが、インライン化されない大きな画像の場合に限り、参照する側のパスが

static/css/static/img/xxx.png

のようにおかしくなってしまいます。

これは url-loader の不具合なのか、それとも assetPublicPath を空にするのがダメなのかわかりません。

正しい対処法

assetsPublicPath: '/project-name/'

のようにサブディレクトリ(githubのリポジトリ名)を明記すると参照側のパスが直りました。