核心是通过 defineConfig 导出配置对象，设置插件、别名、服务器、构建等；推荐必用 defineConfig 以获得类型提示和优化，基础结构置于根目录，支持 ES/CS 模块语法。
在 JS 项目中配置 vite.config.js 自定义构建行为，核心是通过 defineConfig 导出一个配置对象，按需设置插件、路径别名、开发服务器、构建输出等模块。它不是必须写的——Vite 默认就能跑，但真实项目几乎都需要调整。
基础结构和必要导入
文件需放在项目根目录，使用 CommonJS 或 ES 模块语法均可。推荐用 defineConfig 包裹配置，获得类型提示和兼容性保障：
- 导入
defineConfig和对应框架插件（如 Vue 项目加@vitejs/plugin-vue） - 导出函数或对象，
defineConfig({ ... })是标准写法 - 不写
defineConfig也能运行，但会丢失类型检查和部分 Vite 内部优化逻辑
常用构建相关配置项
这些直接影响打包结果、资源路径和代码生成方式：
-
build.outDir：指定最终产物目录，默认
dist，可改为public/build等 -
build.assetsDir：静态资源子目录，默认
assets，如设为static，图片字体将输出到dist/static/ -
build.sourcemap：是否生成 sourcemap，开发调试建议
true，生产环境通常关掉 -
build.minify：压缩方式，
"terser"支持移除console和debugger，配合terserOptions.compress细粒度控制 - build.rollupOptions：深度定制 Rollup 打包逻辑，比如重命名 chunk、分离第三方库、自定义 output.format
开发期与构建共用的实用配置
有些配置既影响本地启动，也参与构建流程：
-
resolve.alias：设置路径别名，如
{ '@': path.resolve(__dirname, 'src') }，让import Xxx from '@/components/X.vue'成为可能 -
define：注入编译期全局常量，例如
{ __VERSION__: JSON.stringify('1.2.0') }，会被直接替换，不产生运行时开销 -
base：决定 HTML 中资源引用的公共路径，开发用
'/'，部署到子路径时设为'./'或'/my-app/' -
css.preprocessorOptions：为 Sass/Less/Stylus 注入全局变量或 mixin，避免每个文件重复
@import
环境变量与多环境适配
Vite 原生支持 .env.* 文件，但需在配置中显式暴露给代码：
- 环境变量文件名必须以
VITE_开头（如VITE_API_URL），才能被import.meta.env访问 - 可在
defineConfig函数中调用loadEnv(mode, root)读取对应环境变量，动态控制配置分支 - 例如：开发时 base 设为
'/'，生产时设为'./'；或根据VITE_ENV切换 API 地址
