プロジェクトのreactjsテンプレートを使用してviteアプリを実行し、.envファイルから環境変数を取得しようとしているシナリオ。 .env から環境変数をフェッチする一般的な方法は、次のように変数に process.env.SOMETHING を使用することです。

何か=秘密のソース

SOMETHING=SECRETSAUCE

この時点で、vite.config.ts は次のようになります:

「vite」から {defineConfig} をインポートします 「@vitejs/plugin-react」から反応をインポートします // https://vitejs.dev/config/ デフォルトのdefineConfigをエクスポート({ プラグイン: [react()]、 })

SOMETHING=SECRETSAUCE

しかし、変数のフェッチは vite ではすぐには機能しません。問題を解決する方法はたくさんあります。ほとんどの方法を試してみましたが、シンプルで単純な方法に固執する必要があると感じました。

おそらく上記の定義と process.env.* によるデフォルトのフェッチ ロジックを使用すると、「Uncaught ReferenceError: global is not registered.

」というエラーが発生するでしょう。

stackoverflow でたくさんの参照を見つけて混乱してしまいます。

エラーを修正するには、以下のように構成でグローバルを定義します。

「vite」から {defineConfig} をインポートします 「@vitejs/plugin-react」から反応をインポートします // https://vitejs.dev/config/ デフォルトのdefineConfigをエクスポート({ プラグイン: [react()]、 定義する： { グローバル: {}、 }、 })

SOMETHING=SECRETSAUCE

これはおそらく、別のより一般的なエラー Uncaught ReferenceError: process is not found.

につながる可能性があります。

繰り返しになりますが、Web 上には多くのソリューションがあり、中には古いものもあります。最も適切で実装が簡単なのは、vite ライブラリからloadEnvをインポートし、以下のようにカスタム ロジックを構築することだと思います。

インポート {defineConfig,loadEnv} から 'vite' 「@vitejs/plugin-react」から反応をインポートします // https://vitejs.dev/config/ デフォルトをエクスポートするdefineConfig(({ モード }) => { const env =loadEnv(mode, process.cwd(), ''); 戻る { 定義する： { グローバル: {}、 'プロセス.env': 環境 }、 プラグイン: [react()]、 } })

SOMETHING=SECRETSAUCE

そして魔法はすぐに起こります!!

また、dotenv 依存関係を使用する必要はありません。process.env.* を使用したコードでの環境変数の取得は、dotenv 依存関係がなくても正常に機能するためです。

コーディングを楽しんでください!