Nuxt.jsでサブディレクトリにデプロイするときの対応
Nuxt.jsで作成したアプリケーションを本番で運用するときに、サブディレクトリ配下に置きたいこともあるかと思います。その場合、アップロードするファイルなどをそのままサブディレクトリに配置するだけではうまく機能しません。このような時はルーティングの設定が必要になります。
過去記事で「Vue.jsでサブディレクトリ内へデプロイするときの対応」ではVue-CLIで作成するときの方法をまとめていましたが、Nuxt.jsでも同じように設定していきます。プロジェクト内にある「nuxt.config.js」内で、下記のように「routerプロパティ」の値にサブディレクトリを設定します。
【nuxt.config.js】※一部抜粋
export default {
.......
router: {
base: '/DIRECTORY_NAME/'
},
.......
}
さらに、公式ドキュメントによると、routerプロパティでbaseの値を設定している場合には、headタグ内で下記のような記述が必要とのことです。
<head>
.......
<base href="{{ router.base }}" />
.......
</head>
そこで、同じく「nuxt.config.js」内の「headプロパティ」に上記のタグが出力されるよう次のように設定を追加します。
【nuxt.config.js】※一部抜粋
export default {
.......
router: {
base: '/DIRECTORY_NAME/'
},
head: {
.......
base: {
href: 'router.base'
}
.......
}
}
あとは、デプロイ用にビルドされたファイル群を指定したサブディレクトリにアップロードします。これでうまくルーティングされるようになりました。また、imgタグなどのsrcの値もルートディレクトリからの相対パスで問題なく表示されるようになりました。
【Vue】※一部抜粋
<template> <div> <img src="img/example.jpg" alt="image" /> </div> </template>Nuxt.jsで作成したアプリケーションをサブディレクトリ配下で運用したい場合は覚えておきたいですね。 （参考にさせて頂いたサイト） Nuxt.js router プロパティ
categories
- WordPress（61）
- JavaScript（49）
- Vue.js（48）
- CSS（46）
- jQuery（34）
- Nuxt.js（22）
- Sass（21）
- Gulp（17）
- webpack（16）
- PHP（14）
- HTML（14）
- GSAP（11）
- React（10）
- Vite（9）
- Pug（9）
- Laravel（8）
- Cordova（8）
- Linux（7）
- Next.js（6）
- Apache（5）
- Shopify（4）
- REST API（4）
- Node.js（4）
- Smarty（3）
- Git（3）
- JSON（3）
- その他プログラミング（3）
- Google Apps API（3）
- Bootstrap（3）
- 環境構築・システム（3）
- TypeScript（2）
- EJS（2）
- RMS（2）
- Docker（2）
- Instagram API（2）
- Excel VBA（2）
- SVG（1）
- Dart（1）
- ECカートASP（1）
- Markdown（1）
- AMP（1）
- Nginx（1）
- XML（1）
- shellscript（1）
- Ruby（1）
- MySQL（1）
