Nuxt.jsでサブディレクトリにデプロイするときの対応
最終更新日： Update!!
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 プロパティ
この記事を書いた人
sponserd
keyword search
recent posts
- GSAPとvivusを使ったSVGのドローアニメーション
GSAPとvivusを使ったSVGのドローアニメーション
- GSAPでScrollTriggerプラグインを使ったスクロール固定表示アニメーションの応用
GSAPでScrollTriggerプラグインを使ったスクロール固定表示アニメーションの応用
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips ＃3
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips ＃3
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips ＃2
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips ＃2
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips ＃1
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips ＃1
- ViteでReactとReact Routerを使ってみる
ViteでReactとReact Routerを使ってみる
- ViteでPugのコンパイル環境を導入する
ViteでPugのコンパイル環境を導入する
- ViteでMarkuplintとPrettierを使える環境を構築する
ViteでMarkuplintとPrettierを使える環境を構築する
categories