vite.config.js 是 Vite 项目配置中枢，以 defineConfig 包裹的 JS 对象定义开发、构建与解析行为；推荐用 vite.config.ts 获类型提示；常用 plugins、resolve.alias、server、build、define 等选项；环境变量需 VITE_ 开头并通过 loadEnv 加载；CSS 与静态资源通过 css.preprocessorOptions、publicDir、assetsInlineLimit 等配置。
vite.config.js 是 Vite 项目的配置中枢，它不依赖复杂约定，而是用清晰的 JavaScript 对象定义行为。配置的核心在于 defineConfig 包裹的选项对象，所有设置都围绕开发体验、构建输出和模块解析展开。
基础结构与类型支持
推荐使用 defineConfig 导出配置，它提供完整的 TypeScript 类型提示和 IDE 智能补全：
- 导入方式统一为
import { defineConfig } from 'vite' - 即使项目是 JS，也建议搭配
vite.config.ts获得更好类型保障 - 避免直接导出纯对象（如
module.exports = {...}），否则会丢失类型和插件兼容性
常用配置项及典型用法
多数项目只需调整以下几类选项，无需从零写起：
-
plugins：注册必需插件，例如 Vue 项目加
@vitejs/plugin-vue，React 加@vitejs/plugin-react -
resolve.alias：设置路径别名，如
{ '@': path.resolve(__dirname, 'src') }，配合path模块使用 -
server：控制 dev server，常见组合包括
port: 3000、open: true、proxy跨域代理（格式同 Webpack DevServer） -
build：影响最终产物，例如
outDir: 'dist'、minify: 'terser'、assetsInlineLimit: 4096 -
define：编译时全局替换，适合注入版本号或环境标识，如
__APP_VERSION__: JSON.stringify('1.2.0')
环境变量与多模式适配
Vite 不自动加载 .env 文件，需显式调用 loadEnv：
立即学习“Java免费学习笔记（深入）”；
- 在
vite.config.js中导入loadEnv，根据mode（如dev、prod）加载对应文件（.env.dev、.env.prod） - 环境变量必须以
VITE_开头才能被客户端代码访问，非前缀变量仅限配置文件内使用 - 可通过函数式导出实现命令区分逻辑，例如
command === 'build'时启用 terser 压缩，'serve'时禁用 sourcemap
CSS 与静态资源处理
预处理器和资源路径可直接在配置中声明：
-
css.preprocessorOptions：为 scss/less/stylus 配置变量、导入路径等，例如 less 的
modifyVars注入主题色 -
publicDir：默认为
public，其中文件将原样复制到输出目录根层，适合放favicon.ico、robots.txt -
assetsDir 和 assetsInlineLimit：控制图片、字体等资源是否转 base64 内联，CDN 场景常设
assetsInlineLimit: 0
