Env Variables and Modes ​

Vite exposes certain constants under the special import.meta.env object. These constants are defined as global variables during dev and statically replaced at build time to make tree-shaking effective.

if (import.meta.env.DEV) {
  // code inside here will be tree-shaken in production builds
  console.log('Dev mode')
}

Built-in Constants ​

Some built-in constants are available in all cases:

• import.meta.env.MODE : {string} the mode the app is running in.

• import.meta.env.BASE_URL : {string} the base url the app is being served from. This is determined by the base config option .

• import.meta.env.PROD : {boolean} whether the app is running in production (running the dev server with NODE_ENV='production' or running an app built with NODE_ENV='production' ).

• import.meta.env.DEV : {boolean} whether the app is running in development (always the opposite of import.meta.env.PROD )

• import.meta.env.SSR : {boolean} whether the app is running in the server .

Env Variables ​

Vite exposes env variables under import.meta.env object as strings automatically.

To prevent accidentally leaking env variables to the client, only variables prefixed with VITE_ are exposed to your Vite-processed code. e.g. for the following env variables:

VITE_SOME_KEY=123
DB_PASSWORD=foobar

Only VITE_SOME_KEY will be exposed as import.meta.env.VITE_SOME_KEY to your client source code, but DB_PASSWORD will not.

console.log(import.meta.env.VITE_SOME_KEY) // "123"
console.log(import.meta.env.DB_PASSWORD) // undefined

If you want to customize the env variables prefix, see the envPrefix option.

.env Files ​

Vite uses dotenv to load additional environment variables from the following files in your environment directory :

.env                # loaded in all cases
.env.local          # loaded in all cases, ignored by git
.env.[mode]         # only loaded in specified mode
.env.[mode].local   # only loaded in specified mode, ignored by git

Also, Vite uses dotenv-expand to expand variables written in env files out of the box. To learn more about the syntax, check out their docs .

Note that if you want to use $ inside your environment value, you have to escape it with \ .

KEY=123
NEW_KEY1=test$foo   # test
NEW_KEY2=test\$foo  # test$foo
NEW_KEY3=test$KEY   # test123

VITE_FOO=foo${VITE_BAR}
VITE_BAR=bar

IntelliSense for TypeScript ​

By default, Vite provides type definitions for import.meta.env in vite/client.d.ts . While you can define more custom env variables in .env.[mode] files, you may want to get TypeScript IntelliSense for user-defined env variables that are prefixed with VITE_ .

To achieve this, you can create an vite-env.d.ts in src directory, then augment ImportMetaEnv like this:

interface ViteTypeOptions {
  // By adding this line, you can make the type of ImportMetaEnv strict
  // to disallow unknown keys.
  // strictImportMetaEnv: unknown
interface ImportMetaEnv {
  readonly VITE_APP_TITLE: string
  // more env variables...
interface ImportMeta {
  readonly env: ImportMetaEnv
}

If your code relies on types from browser environments such as DOM and WebWorker , you can update the lib field in tsconfig.json .

{
  "lib": ["WebWorker"]