More than 1 year has passed since last update.

Vueの環境変数が設定できず悩んだ件（vite使用）

Last updated at 2022-01-01Posted at 2022-01-01

process is not definedに悩まされてviteの設定を調べ解決

Vue3でdotenvを使おうとして、process.env.VUE_APP_HOGEHOGEを使おうとしたところ、

Uncaught ReferenceError: process is not defined

というエラーに悩まされました。

Vue3ではdotenvをinstallしなくても使えるようなので、installせずやってみて、
うまくいかないのでinstallしてみてもだめ。

暫し考えて、viteを使っていることが関係している可能性を思いつき、調べてみたらビンゴ。
以下のページに答えがありました。
https://ja.vitejs.dev/guide/env-and-mode.html

viteでは、
process.env.VUE_APP_HOGEHOGE
ではなく、
import.meta.env.VITE_HOGEHOGE
の形式で読み込めると。

書き換えてみて、無事読み込めました🎉

やろうとしていたことは、axiosに食わせるURLの環境変数を.envで設定することだったのですが、

const apiUrl: string = import.meta.env.VITE_API_URL
const res = await axios.get(apiUrl)

としてbuildしてみると、

 Argument of type 'string | boolean | undefined' is not assignable to parameter of type 'string'

といった形で型定義で怒られました。

どうしたらいいかも、上記のvite公式ページの下の方に書いてありました。

src/env.d.tsに以下のようなinterfaceを追加してやるとOKに。

interface ImportMetaEnv {
  readonly VITE_API_URL: string
}

interface ImportMeta {
  readonly env: ImportMetaEnv
}

これで無事、vite利用環境にて.envを通して環境変数を使うことができました👍

あと、viteにおいては、 .envより、.env.productionなどの方が優先して適用されるようで、環境ごとの.envファイルを準備することが重要とも。
production用のURLは.env.productionに書いて、無事反映されました。

最初、リモートの.envに値を書いてみたのですが、反映されず暫し考えて、build時に別ファイルで設定すべきであることを知った次第で。

無事viteで.envが使えるようになって嬉しかったので、備忘録を残しました。