1---
2name: vite-config
3description: Vite configuration patterns using vite.config.ts
4---
5 
6# Vite Configuration
7 
8## Basic Setup
9 
10```ts
11// vite.config.ts
12import { defineConfig } from 'vite'
13 
14export default defineConfig({
15  // config options
16})
17```
18 
19Vite auto-resolves `vite.config.ts` from project root. Supports ES modules syntax regardless of `package.json` type.
20 
21## Conditional Config
22 
23Export a function to access command and mode:
24 
25```ts
26export default defineConfig(({ command, mode, isSsrBuild, isPreview }) => {
27  if (command === 'serve') {
28    return { /* dev config */ }
29  } else {
30    return { /* build config */ }
31  }
32})
33```
34 
35- `command`: `'serve'` during dev, `'build'` for production
36- `mode`: `'development'` or `'production'` (or custom via `--mode`)
37 
38## Async Config
39 
40```ts
41export default defineConfig(async ({ command, mode }) => {
42  const data = await fetchSomething()
43  return { /* config */ }
44})
45```
46 
47## Using Environment Variables in Config
48 
49`.env` files are loaded **after** config resolution. Use `loadEnv` to access them in config:
50 
51```ts
52import { defineConfig, loadEnv } from 'vite'
53 
54export default defineConfig(({ mode }) => {
55  // Load env files from cwd, include all vars (empty prefix)
56  const env = loadEnv(mode, process.cwd(), '')
57  
58  return {
59    define: {
60      __APP_ENV__: JSON.stringify(env.APP_ENV),
61    },
62    server: {
63      port: env.APP_PORT ? Number(env.APP_PORT) : 5173,
64    },
65  }
66})
67```
68 
69## Key Config Options
70 
71### resolve.alias
72 
73```ts
74export default defineConfig({
75  resolve: {
76    alias: {
77      '@': '/src',
78      '~': '/src',
79    },
80  },
81})
82```
83 
84### define (Global Constants)
85 
86```ts
87export default defineConfig({
88  define: {
89    __APP_VERSION__: JSON.stringify('1.0.0'),
90    __API_URL__: 'window.__backend_api_url',
91  },
92})
93```
94 
95Values must be JSON-serializable or single identifiers. Non-strings auto-wrapped with `JSON.stringify`.
96 
97### plugins
98 
99```ts
100import vue from '@vitejs/plugin-vue'
101 
102export default defineConfig({
103  plugins: [vue()],
104})
105```
106 
107Plugins array is flattened; falsy values ignored.
108 
109### server.proxy
110 
111```ts
112export default defineConfig({
113  server: {
114    proxy: {
115      '/api': {
116        target: 'http://localhost:3000',
117        changeOrigin: true,
118        rewrite: (path) => path.replace(/^\/api/, ''),
119      },
120    },
121  },
122})
123```
124 
125### build.target
126 
127Default: Baseline Widely Available browsers. Customize:
128 
129```ts
130export default defineConfig({
131  build: {
132    target: 'esnext', // or 'es2020', ['chrome90', 'firefox88']
133  },
134})
135```
136 
137## TypeScript Intellisense
138 
139For plain JS config files:
140 
141```js
142/** @type {import('vite').UserConfig} */
143export default {
144  // ...
145}
146```
147 
148Or use `satisfies`:
149 
150```ts
151import type { UserConfig } from 'vite'
152 
153export default {
154  // ...
155} satisfies UserConfig
156```
157 
158<!--
159Source references:
160- https://vite.dev/config/
161- https://vite.dev/guide/
162-->
163