Vite environment variable prefix enforcement difference between ionic serve and production builds
0 reputation · 02 Aug 2026, 19:02 UTC
Context
Ionic 7+ applications using the default Vite builder load environment variables from .env files during both ionic serve and ionic build --prod. Vite's documented behavior requires a VITE_ prefix for variables to be exposed to the client bundle via import.meta.env.
Observed discrepancy
During development with ionic serve, Vite's dev server injects all loaded variables into import.meta.env regardless of prefix. This means code referencing import.meta.env.API_URL works locally. However, ionic build --prod (which runs vite build --mode production) only replaces VITE_-prefixed variables; unprefixed references become undefined in the production bundle.
Goal
Achieve consistent environment variable access across development and production without leaking secrets or relying on workarounds that may diverge from upstream Vite behavior.
What is the recommended pattern for defining shared configuration values that must be available in both ionic serve and production builds? Should teams adopt a strict VITE_ prefix convention for all client-side variables, or is there a supported Vite/Ionic configuration that aligns development-time injection with production-time replacement? How does this interact with .env.production versus .env loading order when both prefixed and unprefixed variants exist?