Vite + Vue3 で.envの値を取得する方法

概要

Vite + Vue3で開発をしていて環境変数を利用しようとした際に詰まったのでメモ程度に残しておこうと思います。

やり方

Vueでは値の接頭辞に VUE_APP というprefixを付ける事で、 process.env から値を呼び出す事が出来るようになります。

VUE_APP_BASE_URL=https://hoge
BASE_URL=https://hoge2

console.log(process.env.VUE_APP_BASE_URL) // https://hoge
console.log(process.env.BASE_URL)         // undefined

ところが何度試してもundefinedが返ってきてしまい、頭を悩ませてた所こちらの記事を見つけました。

どうやらViteでは process.env が利用できず、 import.meta.env というオブジェクトを通してenv値を取得する事が出来るようです。またVueと同じように接頭辞に VITE というprefixを付ける必要があります。

VITE_BASE_URL=https://hoge
BASE_URL=https://hoge2

console.log(import.meta.env.VITE_BASE_URL) // https://hoge
console.log(import.meta.env.BASE_URL)      // undefined

参考