How to load environment variables from .env file using Vite

According to the docs, you need to prefix your variables with VITE_:

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

If you are trying to access env vars outside your app source code (such as inside vite.config.js), then you have to use loadEnv():

import { defineConfig, loadEnv } from 'vite';

export default ({ mode }) => {
    // Load app-level env vars to node-level env vars.
    process.env = {...process.env, ...loadEnv(mode, process.cwd())};

    return defineConfig({
      // To access env vars here use process.env.TEST_VAR
    });
}

For svelteKit

// vite.config.js

import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig, loadEnv } from 'vite';

/** @type {import('vite').UserConfig} */
export default ({ mode }) => {
    // Extends 'process.env.*' with VITE_*-variables from '.env.(mode=production|development)'
    process.env = {...process.env, ...loadEnv(mode, process.cwd())};
    return defineConfig({
        plugins: [sveltekit()]
    }); 
};

if you want to access your env variable TEST_VAR you should prefix it with VITE_

try something like

VITE_TEST_VAR=123f

you can access it with

import.meta.env.VITE_TEST_VAR

Here are three mistakes/gotchas that tripped me up.

• Ensure the .env files are in the root, not the src directory. The filename .env and/or .env.development will work when running locally.
• Restart the local web server for the variables to appear: npm run dev
• Prefix the variables with VITE_ (as already mentioned by Mahmoud and Wonkledge)