Estoy usando vitejs para compilar mi aplicación de reacción de forma estática, sin embargo, después de compilar, las importaciones de .env se vuelven indefinidas, lo que no es el caso en la etapa de desarrollo.

leyendo los documentos, descubrí que estas variables se reemplazan por sus valores correspondientes, pero al mirar el código fuente/compilado en las herramientas de desarrollo después de servirlo, muestra un objeto vacío con el nombre/clave env

Es posible que tenga una configuración incorrecta en vite.config.ts, así que aquí está.

 //vite.config.ts import { defineConfig, loadEnv } from 'vite'; import reactRefresh from '@vitejs/plugin-react-refresh'; import { getAliases } from 'vite-aliases'; const aliases = getAliases({ path: 'src', prefix: '@', }); export default ({ mode }) => { process.env = { ...process.env, ...loadEnv(mode, process.cwd()) }; // import.meta.env.VITE_NAME available here with: process.env.VITE_NAME // import.meta.env.VITE_PORT available here with: process.env.VITE_PORT const plugins = mode === 'development' ? [reactRefresh()] : []; return defineConfig({ plugins, publicDir: 'src/assets', resolve: { alias: aliases, }, build: { chunkSizeWarningLimit: 1500, }, }); };

Y también el código donde hago referencia a estos env var

 //config.ts export const config = () => { const url = import.meta.env.VITE_SERVER_URL; const api = import.meta.env.VITE_API_ENDPOINT; const auth = import.meta.env.VITE_AUTH_ENDPOINT; const isProd = import.meta.env.MODE === 'production'; const isDev = import.meta.env.MODE === 'development'; console.log(url, api, auth); return { api: (endpoint: string) => `${url}${api}${endpoint}`, auth: (endpoint: string) => `${url}${auth}${endpoint}`, test: (endpoint: string) => `${url}test${endpoint}`, isProd, isDev, }; };