Nuxt.jsで生成したアプリケーションのURLパスを指定する方法

先日、Nuxtで生成したアプリケーションを確認しようとサーバーにアップロードしたところ、思ったとおりにレンダリングがされていませんでした。

Development Toolを見たところ、バンドルされたjsファイルにパスがうまく通っていないことが原因でした。

Nuxtで生成したアプリケーションディレクトリを他のディレクトリのルート配下に置くと、バンドルされたjsファイルへのパスが通らなくなり、作成したコンポーネントがレンダリングされていなかったのです。

例えば、生成されたindex.htmlをfile://~/index.html で開こうとすると、他のjsファイルへのパスが通らなくてページが読み込まれないようです。

公式ドキュメントをみると、パスの設定は簡単にできるようになっていたので、備忘録として紹介したいと思います。

nuxt generate したファイルをルート以外のURLに配置するとき

例えば https://yuap.jp/spa/ に配置するとき、nuxt.config.js router: { base }に /spa/と記述することで上記の問題に対処します。

router: {
base: '/spa/'
}

公式ドキュメントはこちら

参考：https://ja.nuxtjs.org/api/configuration-router/

デフォルトは ‘/’ です。アプリケーションのベース URL です。例えばシングルページアプリケーション全体を /app/ 配下で配信したい場合は base に ‘/app/’ を設定します。

nuxt.config.js:

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

base がセットされているときは Nuxt.js はドキュメントのヘッダーに <base href="{{ router.base }}"/> を追加します。