
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 }}"/>
を追加します。
PROFILE
はじめまして、大阪のWeb制作会社Yuapです。「Yuap(ユアプ)」とは英語で「あなたのプランナー」という、Your Plannerの頭文字をとった社名です。 ホームページ制作|Webシステム開発|Webコンサルティングなどの業務を通じて、みなさまの事業の成長に貢献できるようなプランナーになれるよう、日々チャレンジしております。
※お問い合わせ・お見積りは無料です。 IT|ホームページ|Webシステムのことならなんでもお気軽にご相談ください。お問い合わせはこちらから。