プロジェクトのreactjsテンプレートを使用してviteアプリを実行し、.envファイルから環境変数を取得しようとしているシナリオ。 .env から環境変数を取得する一般的な方法は、変数に process.env.SOMETHING を次のように使用することです。
SOMETHING=SECRETSAUCE
この時点で、vite.config.ts は次のようになります:
import { defineConfig } from 'vite' import react from '@vitejs/plugin-react' // https://vitejs.dev/config/ export default defineConfig({ plugins: [react()], })
しかし、変数のフェッチは vite ではすぐには機能しません。問題を解決する方法はたくさんあります。それらのほとんどを試してみましたが、シンプルで単純な方法に固執する必要があると感じました。
おそらく、上記の定義と process.env.* によるデフォルトのフェッチ ロジックでは、「Uncaught ReferenceError: global is not generated.」というエラーが発生するでしょう。
stackoverflow でたくさんの参照を見つけて混乱してしまいます。
エラーを修正するには、以下のように構成でグローバルを定義します。
import { defineConfig } from 'vite' import react from '@vitejs/plugin-react' // https://vitejs.dev/config/ export default defineConfig({ plugins: [react()], define: { global: {}, }, })
これはおそらく、別のより一般的なエラー「Uncaught ReferenceError: process is not generated.」につながる可能性があります。
繰り返しますが、ウェブ上には多くのソリューションがあり、中には古いものもあります。最も適切で実装が簡単なのは、vite ライブラリからloadEnvをインポートし、以下のようにカスタム ロジックを構築することだと思います。
import { defineConfig, loadEnv } from 'vite' import react from '@vitejs/plugin-react' // https://vitejs.dev/config/ export default defineConfig(({ mode }) => { const env = loadEnv(mode, process.cwd(), ''); return { define: { global: {}, 'process.env': env }, plugins: [react()], } })
そして魔法はすぐに起こります!!
また、dotenv 依存関係を使用する必要はありません。process.env.* を使用したコードでの環境変数の取得は、dotenv 依存関係がなくても正常に機能するためです。
コーディングを楽しんでください!
以上がReactjs の vite エラーを修正 - グローバルが定義されておらず、プロセスが定義されていませんの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。