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 から頂ければ幸いです。
それでは！
フィードバックのお願い
この記事のフィードバックがありましたらYoutubeの適当な動画にコメントしていただいたり、お問い合わせからご連絡ください。
