access .env values in vite.config.js file?

[JeffBeltran]

is it possible to reference a variable from a .env file in the vite.config.js file?

In my case im trying to set up my proxy to rely on the value provided from the .env file

server: {
    proxy: {
        "/api": {
            target: import.meta.env.VITE_API_HOST,
            changeOrigin: true,
        },
    }
}

[Matt-Deacalion]

You could load the app level env variables and add them to the Node level env variables (credit: Alec Larson):

import { defineConfig, loadEnv } from 'vite';
import vue from '@vitejs/plugin-vue';


export default ({ mode }) => {
    process.env = { ...process.env, ...loadEnv(mode, process.cwd()) };

    // import.meta.env.YinYang -> process.env.YinYang

    return defineConfig({
        plugins: [vue()],
    });
}

[ngekoding]

Looking for this, thanks.

[awacode21]

i was able to work with that approach unless i used vitest for testing. Because having this code snippet within vite.config.ts prevents env vars working within vitest.

[Shinigami92]

@awacode21 Could you try to create a vitest.config.ts? https://vitest.dev/guide/#configuring-vitest
Hope this helps

[awacode21]

when changing the above code snippet to:

import { defineConfig, loadEnv } from 'vite';
import vue from '@vitejs/plugin-vue';


export default ({ mode }) => {
    Object.assign(process.env, loadEnv(mode, process.cwd()))

    // import.meta.env.YinYang -> process.env.YinYang

    return defineConfig({
        plugins: [vue()],
    });
}

it is working also with vitest.

[MatheusRoichman]

I'm not being able to access variables without the VITE_ prefix (secret variables).