Setting the file. One moment.
Subchapter 11.5
references/environment-api.mdMarkdown2 KBView on GitHub
The Environment API formalizes multiple runtime environments beyond the traditional client/SSR split.
Before Vite 6: Two implicit environments (client and ssr).
Vite 6+: Configure as many environments as needed (browser, node server, edge server, etc.).
For SPA/MPA, nothing changes—options apply to the implicit client environment:
export default defineConfig({
build: { sourcemap: false },
optimizeDeps: { include: ['lib'] },
})export default defineConfig({
build: { sourcemap: false }, // Inherited by all environments
optimizeDeps: { include: ['lib'] }, // Client only
environments: {
// SSR environment
server: {},
// Edge runtime environment
edge: {
resolve: { noExternal: true },
},
},
})Environments inherit top-level config. Some options (like optimizeDeps) only apply to client by default.
interface EnvironmentOptions {
define?: Record<string, any>
resolve?: EnvironmentResolveOptions
optimizeDeps: DepOptimizationOptions
consumer?: 'client' | 'server'
dev: DevOptions
build: BuildOptions
}Runtime providers can define custom environments:
import { customEnvironment } from 'vite-environment-provider'
export default defineConfig({
environments: {
ssr: customEnvironment({
build: { outDir: '/dist/ssr' },
}),
},
})Example: Cloudflare’s Vite plugin runs code in workerd runtime during development.
server.moduleGraph returns mixed client/SSR viewssrLoadModule still worksPlugins can access environment in hooks:
{
name: 'env-aware',
transform(code, id, options) {
if (options?.ssr) {
// SSR-specific transform
}
},
}