Why?

Vite.js provides its own mechanism (meta env) for exposing environment variables through import.meta.env, but hostings like Netlify can't import variables defined in import.meta.env. Here is the issue

This plugin injects environment variables in process.env by configuring the define option.

Installation

Install the package as a development dependency:

npm i -D vite-plugin-envloader

Usage

Add this to your plugin list in the vite config file:

import { defineConfig } from "vite"
import EnvLoader from "vite-plugin-envloader"

export default defineConfig({
    plugins: [
        // ...
        EnvLoader(),
        // ...
    ],
});

Variables defined in the .env file like:

VITE_API_KEY="12345"

Will be available in online hostings through process.env.VITE_API_KEY, while still allowing you to use import.meta.env.VITE_API_KEY in your code.

License

This library is available as open source under the terms of the MIT License.