Vue
Nuxt3で.envを使う方法
いつもご利用ありがとうございます。
この記事には広告が掲載されており、その広告費によって運営しています。
オススメ本
Nuxt3 を触ってみています。
Nuxt3 で.env を使う方法についてまとめました。
Nuxt2.13 以降やり方がアップデートされていたようで、今までのやり方をしたらうまく動きませんでした。
環境
node --version v16.13.0
Nuxt3
失敗例
ルートディレクトリに.env を作成
(※(初心者向け)ルートデ ィレクトリはプロジェクトディレクトリを指します。)
your-project-name/.env
のように.env という名前でファイルを作ります。
場所とファイル名さえ合っていれば大丈夫です。
ファイルの中をこうしてみます。
BASE_URL=https://127.0.0.1:8000
読み込めるかを実験
<template>
<div>{{ baseUrl }}</div>
</template>
<script>
export default {
data() {
return {
baseUrl: "http://127.0.0.1:8000にしたい",
}
},
created() {
console.log(process.env.BASE_URL)
},
}
</script>
コンソール
Uncaught (in promise) TypeError: Cannot read property 'BASE_URL' of undefined
どうやら、ダメっぽいです。
実装方法(結論)
どうやら、nuxt.config.ts で定義して、config として出力するようです。
nuxt.config.ts を編集
export default defineNuxtConfig({
publicRuntimeConfig: {
baseUrl: process.env.BASE_URL,
},
})
表示してみる
<template>
<div>{{ $config.baseUrl }}</div>
</template>
<script>
export default {
data() {
return {
baseUrl: "http://127.0.0.1:8000にしたい",
}
},
created() {
console.log(this.$config.baseUrl)
},
}
</script>
うまく表示されました。やった!
set up 内で使いたいとき
<script setup lang="ts">
const config = useRuntimeConfig()
console.log(`${config.baseUrl}/api/count`)
const { data } = await useAsyncData("count", () =>
$fetch(`${config.baseUrl}/api/count`)
)
//$fetchをNuxt2のaxiosのようにbaseUrl指定する方法が見つからないのでこのようにやるのがベスト?なのかなと思っていますがどうですか?
</script>
まとめ
以上、Nuxt3 で env を使ってみました。
$fetch の baseUrl を axios の baseUrl のように変更することはできないのかな?と結構探したのですが見つかりませんでした。残念。
もし情報あれば教えてくださいませ!
苦情、誤りに関する指摘は下の Twitter の DM から頂ければ幸いです。
それでは!