env variables not accessible in vite.config.js

Describe the bug

Variables from .env* files are accessible only during development/build but not already in vite.config.js.

Im not sure if this behaviour was omitted on purpose because it doesn’t align with vite’s design or it was simply forgotten, but when I was using vue-cli I got used to having the env variables available already in vue.config.js. I find it super convenient to be able to setup the vue/vite configuration parameters based on the values provided by the .env* files (instead of checking the mode and conditionally setting the parameters to the same values which are already in my .env* files.

My current workaround is to use dotenv-flow package to imitate the same behaviour as in vue cli and put this on top of my vite.config.js: require('dotenv-flow').config().

Reproduction

1. create .env with some variable: e.g. VITE_BASE_URL=/example/
2. put console.log(process.env.VITE_BASE_URL) or console.log(import.meta.env.VITE_BASE_URL) somewhere in your vite.config.js
3. its undefined

System Info

• vite version: 2.0.0-beta.65
• Operating System: Windows 10 64bit
• Node version: v12.20.1
• Package manager (npm/yarn/pnpm) and version: npm 6.14.10

[jmheretik]

found another trick in an older issue (https://github.com/vitejs/vite/issues/1096#issuecomment-729077386), that is also nice and seems to cover .env.*.local files too:

import { loadEnv } from 'vite'

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

[pionxzh]

we use a simple trick to do this in our project

export default ({ mode }) => {
    require('dotenv').config({ path: `./.env.${mode}` });
    // now you can access config with process.env.{configName}

    return defineConfig({
        /* ... */
    })
}