Nuxtでサブディレクトリ配下にデプロイする際のstaticファイルの扱いについてのメモ

はじめに

Nuxtを使ってWebアプリを開発していて、https://example.com/test/ のようにサブディレクトリにアプリをデプロイする場合、staticディレクトリに置いてあるファイル（faviconや画像、音声ファイルなど）へのパス指定にも注意が必要です。

なぜパスの修正が必要か？

通常、static配下のファイルは /favicon.ico や /images/logo.png のようにルート相対パスでアクセスされます。
しかし、アプリを https://example.com/test/ にデプロイした場合、このルートは https://example.com/ を指すため、パスが正しく解決されなくなります。

対策

以下のようにパスを修正する必要があります。

• static 配下のファイルには router.base を意識してパスを設定
• 例:
  favicon.ico → /test/favicon.ico
/images/logo.png → /test/images/logo.png

または、動的にbaseパスを付加する方法もあります。

参考：nuxt.config.js の設定(Nuxt2)

export default {
  router: {
    base: '/test/'
  }
}