Vite environment variables: transitioning from implicit to explicit client-side exposure

Client-side Secret Leakage Prevention

Vite utilizes a prefix-based filtering system to ensure that only variables prefixed with VITE_ are exposed to the client-side bundle via import.meta.env. This mechanism is designed to prevent the accidental leakage of sensitive system environment variables from the Node.js process.env global into the browser.

Configuration Constraints

While the VITE_ prefix provides a safety boundary, the define configuration option allows for global constant replacement during the build process. This bypasses the standard environment loading logic, potentially introducing hard-coded values into production chunks if not managed strictly.

Given the priority of .env.local over base environment files, there is a need to clarify the behavior when overlapping variables exist across different modes and the define object.

• How does Vite resolve conflicts when a variable is defined both in a mode-specific .env.[mode] file and the define configuration?
• What is the precise precedence order when a variable is present in .env, .env.local, and the system environment?