vite.config.ts 眼花缭乱的配置项归类解析

---

前言

Vite 作为新一代前端构建工具，凭借其极速的启动和热更新能力，迅速成为开发者们的宠儿。然而，面对 vite.config.ts 中琳琅满目的配置项，许多初学者可能会感到无从下手。本文将为你详细解析 Vite 的配置项，帮助你从入门到精通，轻松驾驭 Vite 的强大功能。

一、基础配置

• root: 指定项目的根目录，默认为 process.cwd()。
• base: 设置公共基础路径，适用于项目部署在非根路径的场景，例如 /my-app/。
• mode: 定义项目的运行模式，通常为 development 或 production，不同模式下 Vite 会有不同的默认配置。
• publicDir: 指定静态资源目录，默认为 public。
• cacheDir: 设置缓存目录，默认为 node_modules/.vite。

二、开发服务器配置 (server)

• host: 开发服务器的主机名，默认为 localhost。
• port: 开发服务器的端口号，默认为 3000。
• open: 是否在启动开发服务器时自动打开浏览器。
• proxy: 配置代理服务器，常用于解决跨域问题。
• https: 启用 HTTPS 协议。

三、构建配置 (build)

• outDir: 指定构建输出的目录，默认为 dist。
• assetsDir: 设置静态资源的输出目录，默认为 assets。
• sourcemap: 是否生成 sourcemap 文件，便于调试。
• minify: 是否压缩代码，默认为 esbuild。
• rollupOptions: 自定义 Rollup 的配置选项。
• lib: 构建库时的特定配置。

四、插件配置 (plugins)

• plugins: 配置 Vite 插件，例如 @vitejs/plugin-vue 用于 Vue 项目，@vitejs/plugin-react 用于 React 项目。

五、依赖优化 (optimizeDeps)

• include: 预构建的依赖项列表。
• exclude: 排除的依赖项列表。
• force: 强制重新预构建依赖。

六、环境变量配置 (env)

• envDir: 环境变量文件的目录，默认为项目根目录。
• envPrefix: 环境变量的前缀，默认为 VITE_。

七、CSS 配置 (css)

• modules: 配置 CSS 模块。
• preprocessorOptions: 配置 CSS 预处理器，如 Sass、Less 等。
• postcss: 配置 PostCSS。

八、JSON 配置 (json)

• namedExports: 是否启用命名导出。
• stringify: 是否将 JSON 文件内容转换为字符串。

九、静态资源处理 (assetsInclude)

• assetsInclude: 指定额外的静态资源类型。

十、日志配置 (logLevel)

• logLevel: 设置日志级别，如 info、warn、error 等。

十一、其他配置

• define: 定义全局常量。
• resolve: 配置模块解析规则。
• esbuild: 自定义 ESBuild 配置。
• ssr: 配置服务器端渲染（SSR）。

示例配置
以下是一个完整的 vite.config.ts 示例配置：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  root: './src',
  base: '/my-app/',
  mode: 'development',
  server: {
    host: 'localhost',
    port: 3000,
    open: true,
    proxy: {
      '/api': 'http://localhost:5000'
    }
  },
  build: {
    outDir: '../dist',
    assetsDir: 'assets',
    sourcemap: true,
    minify: 'esbuild',
    rollupOptions: {
      input: './src/main.ts'
    }
  },
  plugins: [vue()],
  optimizeDeps: {
    include: ['vue', 'vue-router']
  },
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "@/styles/variables.scss";`
      }
    }
  },
  resolve: {
    alias: {
      '@': '/src'
    }
  }
});

十二、总结

Vite 的配置项虽然繁多，但通过分类理解，可以更好地掌握其用途。根据项目需求，灵活配置这些选项，可以显著提升开发体验和构建效率。希望本文能帮助你更好地理解和使用 Vite，让你的开发之旅更加顺畅！