皆様こんにちは、ウチイダです。
ここしばらくReact をキャッチアップしています。
数年前にすこしだけやってみたときは全くできなかったのですが、Vue とかAngular 挟んだら雰囲気がわかるようになりました。
その間にReact 自体も理解しやすくなってきてるのかなと思います。
hooks使わないコードとか、クラスコンポーネントのライフタイムサイクルとかはいまでもよくわからないです。以前はもっと難しかったんだろうな…
さて、今回はViteで環境変数を使う場合のTipsです。
vite における環境変数の取り扱い
- vite は、デフォルトでvite.config.ts と同じ階層にある.env ファイルのうち、VITE_ から始まる環境変数を読み込みされる
- 読み込みするファイルのディレクトリは、vite.config.ts のenvDir プロパティで設定できる
- アプリケーション内からこの環境変数を利用する場合は、import.meta.env. と記述する
- process.env からは利用できないので注意！
# 以下の変数はVite で読み込みされ、参照できる
VITE_VAR_TEST='this is available'
# VITE_ で始まらない変数は読み込みされない
UNAVAILABLE_VAR_IN_VITE='this is unable'参考
わかりやすい日本語でバッチリ公式ドキュメントに書いてあります。
- 環境変数とモード – .env Files | Vite
https://ja.vitejs.dev/guide/env-and-mode.html#env-files
Vite の公式ドキュメントはわかりやすいのでおすすめ、が最も有益なTipsだったかもしれません。
以上です。あなたのお役に立てればうれしいです。