Env Vars & Modes

Pick a mode and see which .env files Vite loads and in what priority. Then see the VITE_ prefix gate that decides which vars reach your client bundle — the rule that keeps secrets safe.

1. Mode → which .env files load

Higher in the list = higher priority (wins on conflict). .local files are git-ignored for secrets; mode-specific files only load for that mode.

2. The VITE_ prefix gate (what reaches the browser)

Only variables prefixed VITE_ are exposed to client code via import.meta.env. Everything else stays server-only — this is the guardrail against leaking secrets into your bundle.

// .env
VITE_API_URL=https://api.example.com   // ✓ exposed
DB_PASSWORD=super-secret               // ✗ never sent to client

// in your app code
const url = import.meta.env.VITE_API_URL;   // works
const pw  = import.meta.env.DB_PASSWORD;    // undefined

// built-ins always available:
import.meta.env.MODE      // "development" | "production" | "staging"
import.meta.env.DEV       // boolean
import.meta.env.PROD      // boolean
import.meta.env.BASE_URL  // your `base` config