Vite environment variable prefix enforcement difference between ionic serve and production builds

The Recommended Pattern

The only supported and secure pattern for shared configuration in Ionic 7+ (Vite-based) applications is to strictly use the VITE_ prefix for all variables intended for client-side access. Any variable that must be available via import.meta.env in a production build must be prefixed; otherwise, Vite will treat it as a server-side secret and omit it from the final bundle.

Explanation of the Discrepancy

Vite is designed to prevent the accidental leakage of sensitive system environment variables (like API keys or database passwords) into the browser. By default, it only exposes variables starting with VITE_.

If you observe that ionic serve allows unprefixed variables while ionic build --prod does not, it is likely due to one of the following:

• Custom Configuration: The vite.config.ts may have an envPrefix setting that is conditionally set to an empty string during development.
• Plugin Interference: A third-party Vite plugin may be mutating the environment object during the dev server lifecycle.
• Mode Mismatch: ionic serve typically runs in development mode, while --prod explicitly sets the mode to production.

Regardless of why the dev server is behaving permissively, the production build's strictness is the intended behavior of the Vite engine. Attempting to align production with this insecure dev behavior is strongly discouraged as it risks exposing system secrets.

Implementation Steps

1. Rename Variables: Update all client-facing variables in .env, .env.development, and .env.production to include the VITE_ prefix (e.g., API_URL → VITE_API_URL).
2. Update References: Search and replace all instances of import.meta.env.VARIABLE_NAME with import.meta.env.VITE_VARIABLE_NAME in your TypeScript/JavaScript files.
3. Verify Loading Order: Ensure your variables are placed in the correct files. Vite loads them in this priority (later overrides earlier):
   • .env (Common)
   • .env.local (Local overrides)
   • .env.[mode] (e.g., .env.production)
   • .env.[mode].local

Verification Commands

To confirm the fix and ensure no unprefixed variables are leaking, use these steps:

# 1. Check Vite version to ensure it is 4.0+ (standard for Ionic 7+)
npx vite --version

# 2. Test production behavior locally without a full deploy
ionic serve --prod

If ionic serve --prod causes your variables to become undefined, it confirms the prefix enforcement is active and your code is relying on unprefixed variables.

Diagnostic Detail Needed: Please check your vite.config.ts for an envPrefix property. If this is explicitly defined, it overrides the default VITE_ behavior.