How do I get environment variables into vite.config before defineConfig in Visual Studio?

[catmanjan]

This is more of a Visual Studio than a Vite problem, but theres nowhere to ask for VS...

I want to set the vite base path using an environment variable however process.env does not contain my .env.development key values until AFTER defineConfig is run

Instead I am manually calling const env = loadEnv(mode, process.cwd(), 'VITE_'); and reading it that way, but that seems wrong

Is there some other way?

[Codebater]

The catch is that Vite can't load .env into process.env before the config runs — the config itself can affect how env is loaded.

For Vite config values, use loadEnv:

export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd(), '')
  return {
    base: env.VITE_BASE_PATH
  }
})

If you specifically need the variables in process.env before Vite starts, set them in Visual Studio's launch environment instead.

That's basically the distinction.

[catmanjan]

Bad robot

[Codebater]

Fair 😂 Too many words for a simple problem.

Short version: loadEnv() is the Vite-native fix. If you need the values in process.env before Vite starts, inject them from Visual Studio instead.

[Codebater]

Fair 😂 Too many words for a simple problem.

Short version: loadEnv() is the Vite-native fix. If you need the values in process.env before Vite starts, inject them from Visual Studio instead.

[catmanjan]

Yes, but how…

[sts19813]

Your loadEnv() approach is not a workaround; it is the documented Vite solution when a value from .env.development must affect vite.config.

Vite intentionally loads .env* files only after resolving the config, because root, envDir, and mode can themselves be set by the config. Therefore a value in .env.development cannot already be in process.env while that config is evaluated.

Use:

import { defineConfig, loadEnv } from 'vite'

export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd(), 'VITE_')

  return {
    base: env.VITE_BASE_PATH || '/',
  }
})

So if the requirement is simply "read .env.development to set Vite's base", you already have the right design.

If you specifically need process.env.VITE_BASE_PATH to exist before Vite starts, it must be supplied by the process that launches Vite, not by a Vite .env file. For a Visual Studio project that launches an npm script, a cross-platform way is:

{
  "scripts": {
    "dev:vs": "cross-env VITE_BASE_PATH=/my-app/ vite",
    "build:vs": "cross-env VITE_BASE_PATH=/my-app/ vite build"
  }
}

Install cross-env as a dev dependency and configure Visual Studio's startup command to run npm run dev:vs. Then this works without loadEnv:

export default defineConfig({
  base: process.env.VITE_BASE_PATH || '/',
})

For a one-off PowerShell launch, the equivalent is:

$env:VITE_BASE_PATH = '/my-app/'
npm run dev

If ASP.NET Core/SpaProxy is the process starting the npm command, you can instead put VITE_BASE_PATH in that profile's Properties/launchSettings.json under environmentVariables; the npm/Vite child process inherits it. If Visual Studio starts the .esproj independently, use the npm-script approach above.

One small naming note: keep the VITE_ prefix only if the value also needs to be exposed to browser code. For a config-only value, something like APP_BASE_PATH plus loadEnv(mode, process.cwd(), '') avoids exposing it through import.meta.env.

The relevant Vite documentation now states this explicitly: https://vite.dev/config/#using-environment-variables-in-config

[catmanjan]

Bad robot