export default ({ mode }) => {
    require('dotenv').config({ path: `./.env.${mode}` });
    // now you can access config with process.env.{configName}
    return defineConfig({
        /* ... */
          
For my use case I wanted to set the base property conditionally. I thought I could do this via env variables in vite.config.ts and ran into the same problem.
@pionxzh I may be wrong but should that be simply:
export default defineConfig(({mode}) => {
  require('dotenv').config({ path: `./.env.${mode}` });
  return {
    /* ... */
The type definitions for defineConfig show that it accepts either the config object or a function that returns the config object:
export declare function defineConfig(config: UserConfigExport): UserConfigExport;
export declare type UserConfigExport = UserConfig | UserConfigFn;
export declare type UserConfigFn = (env: ConfigEnv) => UserConfig;
export declare interface ConfigEnv {
    command: 'build' | 'serve';
    mode: string;
For my use case I wanted to set the base property conditionally. I thought I could do this via env variables in vite.config.ts and ran into the same problem.
@pionxzh I may be wrong but should that be simply:
export default defineConfig(({mode}) => {
  require('dotenv').config({ path: `./.env.${mode}` });
  return {
    /* ... */
@jonjanisch

Ye, I think this way should be better, I didn't notice that defineConfig provide a function interface.

Thanks for the information 👍
          
found another trick in an older issue (#1096 (comment)), 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()))
  ...
  Shinigami92, HomyeeKing, sattellite, spx443812507, flx-sta, hunterliu1003, rikusen0335, sadeghbarati, cosformula, sknightq, and 19 more reacted with thumbs up emoji
  Mehdi-Hp, ianberdin, jamesthomsondev, mktcode, nickpreston24, Reckonyd, and jmyrland reacted with heart emoji
    All reactions
          
Thanks for the code of @jmheretik. I'm using this in postcss.config.js.

I want to change the URL of the CSS background in postcss.config.js. However, the URL prefix is set in .env file. And postcss.config.js can't get variables from import.env(vite export)
module.export = ctx => {
  const {loadEnv} = require('vite')
  const {MY_VARIABLE} = loadEnv(ctx.env, process.cwd)
  return {
          
if the .env files are not in the root folder, the following workaround worked for me.
const envDir = path.resolve(__dirname, "environment");
// see: https://github.com/vitejs/vite/issues/1930#issuecomment-783747858
const loadEnvVariables = (mode: string): void => {
    Object.assign(process.env, loadEnv(mode, envDir, ""));
    console.debug("process.env contains: \n" + JSON.stringify(process.env, undefined, 2));
// https://vitejs.dev/config/
export default defineConfig((init) => {
    loadEnvVariables(init.mode);
    return {
    .....




    

Compared to the other answers, I had to provide an empty string to the 3rd parameter of loadEnv. I am not sure why,
          
This did not work for me:

Object.assign(process.env, loadEnv(mode, process.cwd()))
But this did:

Object.assign(process.env, loadEnv(mode, process.cwd(), ''))
  yannxaver, xiezht, ivandata, leereamsnyder, Aliemeka, and GabrielS0uza reacted with thumbs up emoji
  ivandata, Aliemeka, and GabrielS0uza reacted with heart emoji
  yannxaver, ivandata, Aliemeka, and GabrielS0uza reacted with rocket emoji
    All reactions
      
Proxying based on .env.development does not really work.
There are some workarounds:
- <https://stackoverflow.com/questions/66389043/how-can-i-use-vite-env-variables-in-vite-config-js>
- <vitejs/vite#1930>
Not sure if it is worth it ...
          
This work for me:
export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd())
  const processEnvValues = {
    'process.env': Object.entries(env).reduce(
      (prev, [key, val]) => {
        return {
          ...prev,
          [key]: val,
      {},
  return {
    plugins: [react()],
    define: processEnvValues
      suggest vite directly support use env variabls in vite.config.ts,Because vue2 can, please consider the old projects of vue2 users
      #6598
      
Proxying based on .env.development does not really work.
There are some workarounds:
- <https://stackoverflow.com/questions/66389043/how-can-i-use-vite-env-variables-in-vite-config-js>
- <vitejs/vite#1930>
Not sure if it is worth it ...
          
Another workaround: Just use dotenv and then put the following at the top of your vite config/sveltekit config:
import 'dotenv/config';