[vue]github pagesで表示されない

github pagesでvueプロジェクトを公開した際、なぜか真っ白なページになっていたのでその解決法を書く。

原因

jsなどassetsファイルへのパスが間違っている。

公開されるパス:
https://<gitアカウント名>.github.io/<プロジェクト名>/

一方build後のindex.htmlはjsの読み込みを絶対パスで表記しているのでファイルが読み込めない。

期待しているパス:
https://<gitアカウント名>.github.io/

index.html

<script src="/js/chunk-vendors.a3f55a0f.js"></script>

解決法

相対パスに直せば良い。

vue.config.jsに書けばbuild時に相対パスで出力してくれる。

vue.config.js

module.exports = defineConfig({
  // ...
  assetsDir: './',
  publicPath: './',
})

index.html

<script src="js/chunk-vendors.a3f55a0f.js"></script>

ちなみにgithub pagesへの公開は
npm の gh-pagesを使うと楽だった

参考