草原 道

先日、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 }}"/> を追加します。

PROFILE

はじめまして、大阪のWeb制作会社Yuapです。「Yuap(ユアプ)」とは英語で「あなたのプランナー」という、Your Plannerの頭文字をとった社名です。 ホームページ制作|Webシステム開発|Webコンサルティングなどの業務を通じて、みなさまの事業の成長に貢献できるようなプランナーになれるよう、日々チャレンジしております。

※お問い合わせ・お見積りは無料です。 IT|ホームページ|Webシステムのことならなんでもお気軽にご相談ください。お問い合わせはこちらから。