GithubPagesにNuxt.jsをデプロイすると_nuxt配下が404になる

GithubPagesにNuxt.jsをデプロイすると_nuxt配下が404になる

現象

GithubPagesに、Nuxt.jsで作ったアプリケーションをデプロイすると、_nuxt以下のJavascriptファイルが404Notfoundになる。

一般的な解決方法は、公開するサイトのファイルの中に.nojekyllファイルを作ってあげる方法ですが、それをしていても解決しないこともあります。

原因

このサイトは、https://chipsnet.github.io/simple-todoで公開されていますが、なぜかJSファイルをhttps://chipsnet.github.ioから取得しようとしています。

これはルートディレクトリをNuxtから指定していないためで、Nuxtからすると

Nuxt「なんでサブディレクトリで公開されてんの!?!!?ルートディレクトリって聞いてたんだが!?」

という感じになってしまいます。

対策

Nuxt.jsにサブディレクトリであると認識させてあげる必要があります。

nuxt.config.jsを以下のように変更します

router: {
  base: '/{project-name}/'
},

{project-name}には、プロジェクト名を入れます。

そしてデプロイすると、無事に404は消えているはずです。

参考

Node.jsカテゴリの最新記事