vite.config.ts 的详细配置项说明、完整代码示例及表格总结

以下是 vite.config.ts 的详细配置项说明、完整代码示例及表格总结：

完整代码示例

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue'; // Vue3插件
import tsconfigPaths from 'vite-tsconfig-paths'; // TypeScript路径别名
import { resolve } from 'path';

export default defineConfig({
  // 开发服务器配置
  server: {
    port: 3000, // 开发服务器端口
    host: '0.0.0.0', // 允许外部访问
    open: true, // 启动时自动打开浏览器
    proxy: { // 代理配置
      '/api': {
        target: 'http://localhost:5000',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
      },
    },
  },

  // 插件配置
  plugins: [
    vue(), // 启用Vue3
    tsconfigPaths(), // 使用tsconfig.json中的路径别名
  ],

  // 模块解析配置
  resolve: {
    alias: {
      '@': resolve(__dirname, './src'), // 自定义路径别名
    },
    extensions: ['.js', '.ts', '.vue', '.json'], // 自动解析文件扩展名
  },

  // 构建配置
  build: {
    outDir: 'dist', // 输出目录
    assetsDir: 'assets', // 静态资源目录
    rollupOptions: { // Rollup配置
      input: {
        main: resolve(__dirname, 'index.html'),
        // 可添加多页面配置
      },
    },
    emptyOutDir: true, // 构建前清空输出目录
    target: 'es2015', // 构建目标浏览器版本
  },

  // 依赖优化配置
  optimizeDeps: {
    include: ['vue', 'vue-router'], // 预构建依赖列表
    exclude: ['lodash'], // 排除预构建的依赖
  },

  // CSS相关配置
  css: {
    preprocessorOptions: { // 预处理器配置（如Sass/Less）
      scss: {
        additionalData: `@import "./src/styles/variables.scss";` // 全局导入变量
      },
    },
    postcss: { // PostCSS配置
      plugins: [
        require('autoprefixer')(),
      ],
    },
  },

  // 定义全局变量
  define: {
    __APP_ENV__: JSON.stringify(process.env.NODE_ENV), // 定义环境变量
  },

  // 其他配置
  clearScreen: true, // 构建时清屏
});

配置项详细说明

1. server

• 作用：配置开发服务器行为。
• 参数：
  • port：开发服务器端口（默认 3000）。
  • host：服务器监听地址（默认 localhost）。
  • open：启动时是否自动打开浏览器（默认 false）。
  • proxy：配置代理规则，解决开发环境跨域问题。

2. plugins

• 作用：注册Vite插件。
• 示例：

  plugins: [
    vue(), // 启用Vue3
    tsconfigPaths(), // 使用TypeScript路径别名
  ]
  

3. resolve

• 作用：配置模块解析规则。
• 参数：
  • alias：定义路径别名（如 @ 指向 src 目录）。
  • extensions：自动解析文件扩展名（如 .vue、.ts）。

4. build

• 作用：配置构建输出。
• 参数：
  • outDir：输出目录（默认 dist）。
  • rollupOptions：自定义Rollup配置（支持多页面应用）。
  • emptyOutDir：是否清空输出目录（默认 true）。

5. optimizeDeps

• 作用：优化依赖预构建。
• 参数：
  • include：强制预构建的依赖列表。
  • exclude：排除预构建的依赖。

6. css

• 作用：配置CSS处理（如预处理器、PostCSS）。
• 示例：

  css: {
    preprocessorOptions: {
      scss: { additionalData: `@import "./src/styles/variables.scss"` }
    },
    postcss: { plugins: [require('autoprefixer')()] }
  }
  

7. define

• 作用：定义全局常量，用于环境变量替换。
• 示例：

  define: {
    __APP_ENV__: JSON.stringify(process.env.NODE_ENV)
  }
  

配置项总结表格

关键说明

1. TypeScript支持：需安装 @types/node 和 vite-tsconfig-paths。
2. Vue3配置：通过 @vitejs/plugin-vue 自动处理 .vue 文件。
3. 路径别名：通过 resolve.alias 或 vite-tsconfig-paths 实现。
4. 环境变量：通过 .env 文件定义，前缀需为 VITE_（如 VITE_API_URL）。

如需进一步优化（如代码压缩、性能分析），可参考Vite官方文档扩展配置。