Nuxt2プロジェクトをrootディレクトリ以外にデプロイする際、 nuxt.config.js に router.base を設定しているケースのマイグレーションの書き換え方について。
Nuxt2側
以下のような形で、appを /sub-directory/ に公開しているケースを想定。
nuxt.config.js
export default {
// ...
router: {
base: '/sub-directory/',
},
}
その際に、router.baseを参照しているcomponentの例として、OptionsApiItem.vue と CompositionApiItem.vue を用意してみる。
画像は /static/images/ に cat.jpgを配置しそれを参照。
/components/OptionsApiItem.vue
<template>
<div>
<div>{{ count }}</div>
<img :src="`${ $router.options.base }images/cat.jpg`" alt="🐈">
</div>
</template>
<script lang="ts">
export default {
data() {
return {
count: 99,
},
},
}
</script>
/components/CompositionApiItem.vue
<template>
<div>
<div>{{ count }}</div>
<img :src="`${ $router.options.base }images/cat.jpg`" alt="🐈">
</div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
export default defineComponent({
setup() {
const count = ref<number>(99)
return {
count,
}
}
})
</script>
Nuxt3側
Nuxt3ではアプリのベースURLの設定方法が異なる。（app.baseURL）
nuxt.config.ts
export default {
// ...
app: {
baseURL: '/sub-directory/',
}
}
Nuxt3では $router.options.base にアクセスできない。
代わりに $config.app.baseURL 、もしくはuseRuntimeConfig() を使って参照する。
Options APIからは useRuntimeConfig() が使えないので注意。
画像は /static/images/ から /public/images/ に変わる。
/components/OptionsApiItem.vue
<template>
<div>
<div>{{ count }}</div>
<img :src="`${ $config.app.baseURL }images/cat.jpg`" alt="🐈">
</div>
</template>
<script lang="ts">
export default {
data() {
return {
count: 99,
},
},
}
</script>
/components/CompositionApiItem.vue
<template>
<div>
<div>{{ count }}</div>
<img :src="`${ $config.app.baseURL }images/cat.jpg`" alt="🐈">
<img :src="`${ baseURL }images/cat.jpg`" alt="🐈">
</div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
export default defineComponent({
setup() {
const count = ref<number>(99)
const runtimeConfig = useRuntimeConfig()
const baseURL = runtimeConfig.app.baseURL
return {
count,
baseURL,
}
}
})
</script>
/components/ScriptSetupItem.vue
<script setup lang="ts">
import { ref } from 'vue'
const count = ref<number>(99)
const runtimeConfig = useRuntimeConfig()
const baseURL = runtimeConfig.app.baseURL
</script>
<template>
<div>
<div>{{ count }}</div>
<img :src="`${ $config.app.baseURL }images/cat.jpg`" alt="🐈">
<img :src="`${ baseURL }images/cat.jpg`" alt="🐈">
</div>
</template>