1. Vite 配置基础与核心概念Vite 作为新一代前端构建工具其配置系统设计得既灵活又强大。与传统的 webpack 配置相比Vite 的配置文件更加简洁明了同时保留了足够的扩展能力。让我们从最基础的配置文件开始// vite.config.js export default { // 这里是配置选项 }这个空配置对象已经是一个合法的 Vite 配置文件。Vite 会自动在项目根目录查找这个文件也支持 .ts 扩展名。值得注意的是即使项目没有在 package.json 中设置type: moduleVite 也支持在配置文件中使用 ESM 语法这得益于其内部的预处理机制。提示如果你需要指定自定义的配置文件路径可以使用--config命令行选项vite --config my-config.js2. 配置智能提示与类型安全作为开发者我们都希望在编写配置时能获得良好的类型提示。Vite 提供了几种方式来实现这一点2.1 使用 JSDoc 类型注解/** type {import(vite).UserConfig} */ export default { // 在这里编写配置会获得类型提示 }这种方式不需要额外导入直接通过 JSDoc 注释就能获得类型提示。2.2 使用 defineConfig 工具函数更推荐的方式是使用 Vite 提供的defineConfig工具函数import { defineConfig } from vite export default defineConfig({ // 配置项自动获得类型提示 })这种方式更加简洁而且不需要额外的注释。2.3 TypeScript 配置文件如果你使用 TypeScript 编写配置文件还可以使用satisfies运算符import type { UserConfig } from vite export default { // 配置项 } satisfies UserConfig这种方式提供了最严格的类型检查适合 TypeScript 项目。3. 条件配置与动态配置实际项目中我们经常需要根据不同的环境或命令来调整配置。Vite 支持导出函数形式的配置3.1 基于命令的配置export default defineConfig(({ command, mode, isSsrBuild, isPreview }) { if (command serve) { return { // 开发环境特有配置 server: { port: 3000, open: true } } } else { return { // 生产环境特有配置 build: { minify: terser } } } })这里的command参数有两个可能的值serve开发环境对应vite dev或vite servebuild生产环境对应vite build3.2 异步配置如果你的配置需要异步加载某些数据Vite 也支持异步配置export default defineConfig(async ({ command, mode }) { const someAsyncData await fetchSomeData() return { define: { __ASYNC_DATA__: JSON.stringify(someAsyncData) } } })4. 环境变量处理环境变量是项目配置中非常重要的一部分。Vite 处理环境变量的方式有些特殊4.1 基本环境变量使用默认情况下Vite 只会在客户端代码中暴露以VITE_为前缀的环境变量。例如VITE_API_URLhttps://api.example.com在代码中可以通过import.meta.env.VITE_API_URL访问。4.2 在配置中使用环境变量如果需要在配置文件中使用环境变量需要特别注意加载时机。Vite 会在解析完配置后才加载.env文件因此直接使用process.env可能无法获取到预期的值。正确的做法是使用loadEnv函数import { defineConfig, loadEnv } from vite export default defineConfig(({ mode }) { // 加载所有环境变量不限于 VITE_ 前缀 const env loadEnv(mode, process.cwd(), ) return { server: { port: env.PORT || 5173 }, define: { __APP_VERSION__: JSON.stringify(env.APP_VERSION || 1.0.0) } } })5. 常用配置项详解让我们深入探讨几个最常用的配置项5.1 服务器配置 (server)export default defineConfig({ server: { port: 3000, // 指定端口 host: true, // 监听所有地址 open: /, // 启动时打开浏览器 proxy: { // 代理配置 /api: { target: http://localhost:8080, changeOrigin: true } } } })5.2 构建配置 (build)export default defineConfig({ build: { outDir: dist, // 输出目录 assetsDir: assets, // 静态资源目录 emptyOutDir: true, // 构建前清空输出目录 sourcemap: true, // 生成 sourcemap minify: terser, // 代码压缩工具 rollupOptions: { // Rollup 配置 input: { main: index.html, admin: admin.html } } } })5.3 插件配置 (plugins)import vue from vitejs/plugin-vue import legacy from vitejs/plugin-legacy export default defineConfig({ plugins: [ vue(), legacy({ targets: [defaults, not IE 11] }) ] })6. 调试配置技巧在开发过程中我们可能需要调试 Vite 的配置文件。以下是几个实用技巧6.1 VS Code 调试配置在.vscode/settings.json中添加{ debug.javascript.terminalOptions: { resolveSourceMapLocations: [ ${workspaceFolder}/**, !**/node_modules/**, **/node_modules/.vite-temp/** ] } }这样可以解决在配置文件中设置断点时可能出现的源映射问题。6.2 配置加载器选项Vite 默认使用 Rolldown 加载配置文件这在某些情况下可能会导致问题。你可以通过命令行参数改变加载方式vite --configLoader runner # 使用 module runner vite --configLoader native # 使用原生运行时7. 常见问题与解决方案7.1 配置文件热更新Vite 默认不会监听配置文件的变化。如果你修改了配置文件需要手动重启开发服务器。7.2 配置文件路径问题当配置文件位于子目录时需要注意路径解析是基于项目根目录的。可以使用path.resolve来处理路径import path from path export default defineConfig({ resolve: { alias: { : path.resolve(__dirname, ./src) } } })7.3 插件顺序问题某些插件需要按特定顺序执行。例如Vue 插件通常应该放在插件数组的前面export default defineConfig({ plugins: [ vue(), // Vue 插件在前 otherPlugin() ] })8. 高级配置技巧8.1 多页面应用配置export default defineConfig({ build: { rollupOptions: { input: { main: index.html, admin: admin.html, dashboard: dashboard.html } } } })8.2 CSS 相关配置export default defineConfig({ css: { preprocessorOptions: { scss: { additionalData: import /styles/variables.scss; } } } })8.3 自定义构建目标export default defineConfig({ build: { target: es2020, polyfillModulePreload: false } })9. 性能优化配置9.1 依赖预构建export default defineConfig({ optimizeDeps: { include: [lodash-es, axios], exclude: [vue-demi] } })9.2 代码分割export default defineConfig({ build: { rollupOptions: { output: { manualChunks(id) { if (id.includes(node_modules)) { return vendor } } } } } })10. 实际项目配置示例最后让我们看一个完整的实际项目配置示例import { defineConfig } from vite import vue from vitejs/plugin-vue import path from path export default defineConfig(({ command }) { const isProduction command build return { base: isProduction ? /production-sub-path/ : /, plugins: [vue()], resolve: { alias: { : path.resolve(__dirname, ./src) } }, server: { port: 3000, proxy: { /api: { target: http://localhost:8080, changeOrigin: true } } }, build: { outDir: dist, assetsDir: assets, sourcemap: !isProduction, minify: isProduction ? terser : false, rollupOptions: { output: { manualChunks(id) { if (id.includes(node_modules)) { return vendor } } } } }, css: { preprocessorOptions: { scss: { additionalData: import /styles/variables.scss; } } } } })这个配置包含了我们在实际项目中最常用到的功能区分开发和生产环境Vue 插件支持路径别名开发服务器配置构建优化CSS 预处理代码分割在实际项目中你可以根据具体需求调整这个基础配置。记住Vite 的配置系统非常灵活几乎可以满足任何前端项目的构建需求。