Em um cenário em que você está executando um aplicativo vite com modelo reactjs para um projeto e tentando buscar a variável de ambiente do arquivo .env. Como a maneira popular de buscar as variáveis ​​de ambiente de .env é usar process.env.SOMETHING para a variável como:

SOMETHING=SECRETSAUCE

Neste ponto, o vite.config.ts ficaria assim:

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

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

Mas buscar variáveis ​​não funciona imediatamente e há muitas maneiras de resolver o problema. Eu tentei a maioria deles e decidi seguir o caminho simples e direto.

Provavelmente com a definição acima e a lógica de busca padrão com process.env.*, você teria recebido o erro Uncaught ReferenceError: global não está definido.

Encontro muitas referências no stackoverflow e fico confuso.

A correção do erro é definir global na configuração conforme abaixo.

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

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

Agora, isso provavelmente levaria a outro erro mais comum Uncaught ReferenceError: o processo não está definido.

Novamente, existem muitas soluções na web e algumas estão desatualizadas. Acho que o mais relevante e fácil de implementar é importar loadEnv da biblioteca vite e construir a lógica personalizada conforme abaixo.

importar {defineConfig, loadEnv} de 'vite' importar reação de '@vitejs/plugin-react' // https://vitejs.dev/config/ exportar padrão defineConfig(({ modo }) => { const env = loadEnv(mode, process.cwd(), ''); retornar { definir: { globais: {}, 'process.env': env }, plug-ins: [react()], } })

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()],
  }
})

E a mágica acontece imediatamente!!

Além disso, não precisamos usar a dependência dotenv, pois a busca de variável de ambiente no código com process.env.* funciona bem sem ela.

Boa codificação!