В сценарии, где вы запускаете приложение Vite с шаблоном реакции JS для проекта и пытаетесь получить переменную среды из файла .env. Популярным способом получения переменных среды из .env является использование процесса.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 получение переменной не работает сразу, и есть много способов решить эту проблему. Я попробовал большинство из них и решил придерживаться простого и понятного пути.

Возможно, с приведенным выше определением и логикой выборки по умолчанию с помощью процесса.env.* вы бы получили ошибку Uncaught ReferenceError: глобальный не определен.

Я нашел много ссылок в stackoverflow и запутался.

Исправление ошибки заключается в определении глобального значения в конфигурации, как показано ниже.

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  define: {
    global: {},
  },
})

Это, вероятно, приведет к еще одной, более распространенной ошибке: Uncaught ReferenceError: процесс не определен.

Опять же, в сети существует множество решений, некоторые из которых уже устарели. Я считаю, что наиболее актуальным и простым в реализации является импорт loadEnv из библиотеки vite и создание пользовательской логики, как показано ниже.

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, поскольку выборка переменных среды в коде с помощью процесса.env.* работает хорошо и без нее.

Удачного программирования!