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(), // 启用Vue3tsconfigPaths(), // 使用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(), // 启用Vue3tsconfigPaths(), // 使用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)
  }
  

---

配置项总结表格

配置项	描述	默认值	示例
server	开发服务器配置	{}	{ port: 3000, proxy: { ... } }
plugins	注册Vite插件	[]	[vue(), tsconfigPaths()]
resolve	模块解析规则（路径别名、扩展名）	{}	{ alias: { '@': './src' }, extensions: ['.ts', '.vue'] }
build	构建输出配置	{}	{ outDir: 'dist', rollupOptions: { ... } }
optimizeDeps	依赖预构建优化	{}	{ include: ['vue'] }
css	CSS预处理器和PostCSS配置	{}	{ preprocessorOptions: { scss: { ... } } }
define	定义全局常量	{}	{ __APP_ENV__: JSON.stringify('production') }

---

关键说明

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官方文档扩展配置。