is it not possible to use vite's mode option for vitepress build?

[linusang-spark]

it seems that the mode is only development when we run docs:dev and production when we run docs:build. No other custom modes we can use?

[brc-dd]

Yeah, not supported.

[brc-dd]

What’s your use case?

[linusang-spark]

i am loading some dynamic data on the vitepress site and we want to test it under a preprod environment before publishing it. I have a .env.preprod file that has a different environment value from the .env.production file. I foresee there might be use-cases for a staging or testing env where vite's mode option will be useful. would be great if vitepress can support this flag for vitepress build

[brc-dd]

You can do something like this:

// package.json scripts:

"docs:build:staging": "VP_MODE=staging vitepress build docs"

// docs/.vitepress/config.ts

import { loadEnv, defineConfig } from 'vitepress'

loadEnv(process.env.VP_MODE || '', process.cwd())

export default defineConfig(...)

On newer versions of node, you can just do something like:

"docs:build:staging": "node --env-file=.env.staging ./node_modules/vitepress/bin/vitepress.js"

[linusang-spark]

thanks for the solution. On a similar question, this wouldn't work on <ClientOnly> components right? Because when I tried, it is either development or production mode it seems.

[SetsuikiHyoryu]

You can do something like this:

// package.json scripts:

"docs:build:staging": "VP_MODE=staging vitepress build docs"

// docs/.vitepress/config.ts

import { loadEnv, defineConfig } from 'vitepress'

loadEnv(process.env.VP_MODE || '', process.cwd())

export default defineConfig(...)

On newer versions of node, you can just do something like:

"docs:build:staging": "node --env-file=.env.staging ./node_modules/vitepress/bin/vitepress.js"

I tried this method in docs/.vitepress/config.ts. I followed the approach in the official documentation to dynamically return defineConfig using a function, and I was surprised to find that this function receives the same parameters as Vite, allowing me to successfully access environment variables.

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