用途:用于为现代 Web 应用搭建 Vite 构建工具、配置带 HMR 的开发服务器、优化构建性能与包体积、使用 Vite 插件(React、Vue 等)以及配置环境变量。不适用于 Webpack 配置(应使用 webpack 技能)和旧式构建。
主要能力与约定:配置 vite.config 以满足项目需求;使用带 VITE_ 前缀的环境变量;优化构建输出;正确配置插件;处理静态资源。
必要用法:配置必须使用 defineConfig 以获得类型安全,例如从 "vite" 导入 defineConfig,并配合框架插件(如 @vitejs/plugin-react)导出配置。环境变量需加 VITE_ 前缀,例如在 .env 中写 VITE_API_URL=https://api.example.com,代码中通过 import.meta.env.VITE_API_URL 访问;无前缀变量不会被暴露。框架支持需使用对应插件。
决策参考:React 项目安装并使用 @vitejs/plugin-react;Vue 项目使用 @vitejs/plugin-vue;需要路径别名时在 vite.config 配置 resolve.alias;自定义开发端口设置 server.port;代理 API 调用可配置 server.proxy 以避免 CORS;构建慢时检查包体积、使用动态导入、优化依赖;需要区分环境时使用 mode 参数或独立配置文件。
边界情况:CommonJS 依赖可用 optimizeDeps.include 预打包;全局变量用 define 选项在构建时替换常量;静态资源中 public/ 原样复制,导入的资源会被处理并加哈希;子目录部署设置 base;CSS 自动拆分,build.cssCodeSplit: false 可合并。
限制:资料未提供安装命令、收费、价格、平台与效果等信息,暂未提供。官方资源为 https://vitejs.dev/guide/ 与 https://vitejs.dev/config/。