More than 1 year has passed since last update.

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

Last updated at 2022-04-14Posted at 2022-04-14

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を使うと楽だった