@gergoszaszvaradi/vite-env

Extends vite.loadEnv. It loads the actual environment variables from process.env and the specified .env and .env.* files (such as .env, .env.local, .env.development, .env.production)

Installation

npm i -D @gergoszaszvaradi/vite-env

yarn add -D @gergoszaszvaradi/vite-env

Usage

The package exports a fromEnv function that can be used to load environment variables. It uses the same strategy to load variables as the native Vite solution does.

vite.config.ts

import { defineConfig, loadEnv } from "vite";
// ...
import { fromEnv } from "@gergoszaszvaradi/vite-env";

export default defineConfig(({ mode }) => {
    return {
        // ...
        define: fromEnv({ mode }),
    };
});

.env

MY_VAR=my_var_value

Typings for environment variables if the exposed path is import.meta.env

vite-env.d.ts

/// <reference types="vite/client" />

interface ImportMetaEnv {
    readonly MY_VAR : string
    // more env variables...
}

interface ImportMeta {
    readonly env: ImportMetaEnv
}

index.ts

console.log(import.meta.env.MY_VAR);

Options

{
    // The mode that vite provides. Uses the same way as loadEnv does.
    mode : string,
    // The directory where the .env* files are located. Default is process.cwd()
    envDir ?: string;
    // Only the variables with these prefixes are going to be loaded. Default is nothing.
    prefixes ?: string | string[];
    // Only the variables whose name is defined here are loaded. Default is undefined.
    variables ?: string[];
    // Where to expose the variable. Default is import.meta.env
    defineOn ?: string;
}

Using prefixes

vite.config.ts

// ...
define: fromEnv({ mode, prefixes: "VITE_" }),
// ...

This will work the same way as loadEnv does. Only environment variables with the VITE_ prefix are loaded.

Using only specified variables

vite.config.ts

// ...
define: fromEnv({ mode, variables: ["API_URL", "API_KEY"] }),
// ...

In this case only the API_URL and API_KEY variables are loaded and exposed to the application.