How to access environment variables in config.mts?

[onurusluca]

Hi!

Let's say I have this .env.development file and I want to access these envs:

VITE_ENVIRONMENT=production
VITE_BASE_URL=/

And I want to do something like this:

const sourceUrl =
  env.VITE_ENVIRONMENT === 'production'
    ? 'https://prd-script.ts'
    : env.VITE_ENVIRONMENT === 'staging'
    ? 'https://stg-script.ts'
    : env.VITE_ENVIRONMENT === 'development'
    ? 'https://dev-script.ts'
    : 'http://localhost:5173/dist/local-script.js'
    
export default defineConfig({
...

[
    'script',
    {
      async: '',
      src: sourceUrl ,
      type: 'module'
    }
]

Also how do I use them on build? Normally with Vite, we do vite build --mode development so the build knows what env to use. Is this the same with VitePress? vitepress build --mode development maybe?

[onurusluca]

After a lot of research, I got it working. I don't know if this is the best way, but hey it works:

1. Install cross-env: pnpm add cross-env
2. Add package.json scripts:

    "build:prod": "cross-env ENVIRONMENT=production vitepress build",
    "build:stg": "cross-env ENVIRONMENT=staging vitepress build",
    "build:dev": "cross-env ENVIRONMENT=development vitepress build",

3. In config.mts, now we can use process.env.ENVIRONMENT

const sourceUrl =
  process.env.ENVIRONMENT=== 'production'
    ? 'https://prd-script.ts'
    : process.env.ENVIRONMENT=== 'staging'
    ? 'https://stg-script.ts'
    : process.env.ENVIRONMENT=== 'development'
    ? 'https://dev-script.ts'
    : 'http://localhost:5173/dist/local-script.js'

4. When building we do pnpm build:dev, and the build recognizes that this is a dev build.

[Karlstens]

From your last example, what would the sample content of .env.staging look like? Assuming it has several variables, how do you then import/use those variables? Do they all have to be prefixed with VITE_?

I can only get environment variables working when they have a VITE_ prefix, and only if feed them in directly via the cross-env package JSON, such as;

"docs-example_a:dev": "cross-env VITE_TARGET_PROJECT=\"example a\" cross-env VITE_ANOTHER_EXAMPLE=\"another example yay 🥳\" vitepress dev docs"

Been wondering how to tidy this up and use a .env structure.

With my current method, I can at least use these in any of the VitePress index.js or config.js scripts, or even feed them directly as content;

index.md

<div>
    <p>The current project is: {{ viteTargetProject }}</p>
    <p>Another example value: {{ anotherExample }}</p>
</div>

<script setup>
import { ref } from 'vue'
// Access the environment variable
const viteTargetProject = ref(import.meta.env.VITE_TARGET_PROJECT);
// Access the VITE_ANOTHER_EXAMPLE environment variable
const anotherExample = ref(import.meta.env.VITE_ANOTHER_EXAMPLE);
...
</script>

It's a trashy example, but this became key to enabling a method to build the same set of docs for two different audiences, one public and one private, with the private having all public plus a lot more privately accessible content.

[weizwz]

// docs/.vitepress/config.ts
export default async ({ mode }) => {
  const env = loadEnv(mode || '', process.cwd())
  retrun defineConfig({ /* ... */ })
}

#3533