以下是 Vite 配置文件的 详细说明 和 打包优化配置 的完整指南，涵盖核心配置项和最佳实践优化策略。
一、Vite 核心配置详解
1. 基础配置
import { defineConfig } from 'vite'
import path from 'path'
export default defineConfig({
// 项目根目录（默认当前工作目录）
root: path.resolve(__dirname, 'src'),
// 部署基础路径（默认 '/'）
base: '/your-project/', // 适用于子路径部署
// 静态资源目录（默认 'public'）
publicDir: 'public',
// 环境变量目录（默认根目录）
envDir: './env',
// 环境变量前缀（默认 'VITE_'）
envPrefix: 'APP_',
})2. 开发服务器 (server)
server: {
port: 3000, // 端口号
host: '0.0.0.0', // 允许外部访问
open: true, // 启动时打开浏览器
cors: true, // 启用 CORS
strictPort: false, // 端口占用是否自动切换
// 代理配置（解决跨域）
proxy: {
'/api': {
target: 'http://backend:8080',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '')
}
}
}3. 构建配置 (build)
build: {
outDir: 'dist', // 输出目录
assetsDir: 'assets', // 静态资源目录
assetsInlineLimit: 4096, // 小于 4KB 的资源转为 base64
sourcemap: true, // 生产环境 sourcemap（可选）
minify: 'terser', // 压缩工具（esbuild/terser）
cssCodeSplit: true, // CSS 代码分割
reportCompressedSize: false, // 关闭压缩大小报告（提升构建速度）
// Rollup 配置（高级）
rollupOptions: {
input: {
main: path.resolve(__dirname, 'index.html'),
},
output: {
// 文件哈希命名（缓存优化）
entryFileNames: 'js/[name].[hash].js',
chunkFileNames: 'js/[name].[hash].js',
assetFileNames: 'assets/[name].[hash][extname]'
}
},
// Terser 压缩选项
terserOptions: {
compress: {
drop_console: true, // 移除 console
drop_debugger: true // 移除 debugger
}
}
}4. 依赖优化 (optimizeDeps)
optimizeDeps: {
include: ['lodash-es', 'vue'], // 强制预构建的依赖
exclude: ['vue-demi'], // 排除的依赖
needsInterop: ['some-cjs-pkg'] // 需要转换的 CJS 模块
}5. 插件系统 (plugins)
import vue from '@vitejs/plugin-vue'
import legacy from '@vitejs/plugin-legacy'
import viteImagemin from 'vite-plugin-imagemin'
plugins: [
vue(),
legacy({ // 兼容旧浏览器
targets: ['defaults', 'not IE 11']
}),
viteImagemin({ // 图片压缩
gifsicle: { optimizationLevel: 7 },
mozjpeg: { quality: 50 }
})
]6. 路径别名 (resolve.alias)
resolve: {
alias: {
'@': path.resolve(__dirname, 'src'),
'components': '/src/components'
}
}7. CSS 配置
css: {
modules: {
localsConvention: 'camelCase' // 类名转换规则
},
preprocessorOptions: {
scss: {
additionalData: `@import "@/styles/vars.scss";` // 全局 SCSS 变量
},
less: {
math: 'always' // Less 配置
}
},
postcss: { // PostCSS 插件
plugins: [require('autoprefixer')]
}
}8. 模式 (mode)
- 通过
--mode指定环境模式（默认development或production）
// package.json
"scripts": {
"build:test": "vite build --mode test"
}完整示例
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
export default defineConfig({
root: './src',
base: '/my-app/',
server: {
port: 3000,
proxy: {
'/api': 'http://localhost:5000'
}
},
build: {
outDir: '../dist',
sourcemap: true
},
plugins: [vue()],
resolve: {
alias: {
'@': path.resolve(__dirname, 'src')
}
},
css: {
preprocessorOptions: {
scss: {
additionalData: `@import "@/styles/global.scss";`
}
}
}
})其他说明
- TypeScript 支持：配置文件支持
.ts格式，需安装@vitejs/plugin-vue-jsx（如需要 JSX）。 - 热更新：默认启用 HMR，无需额外配置。
- 环境变量：通过
.env文件加载变量（前缀为VITE_）。
二、打包优化策略
1. 代码分割 (Code Splitting)
// rollupOptions 中配置
rollupOptions: {
output: {
manualChunks: (id) => {
if (id.includes('node_modules')) {
// 将 node_modules 中的依赖拆分为单独的 chunk
return 'vendor'
}
}
}
}2. Tree Shaking
- 默认自动启用，确保代码使用 ES Module 格式。
- 检查
package.json中是否有"sideEffects": false。
3. CDN 加速
// 使用 vite-plugin-cdn-import
import importToCDN from 'vite-plugin-cdn-import'
plugins: [
importToCDN({
modules: [
{
name: 'vue',
var: 'Vue',
path: 'http:///npm/vue@3.2.37/dist/vue.global.prod.js'
}
]
})
]4. Gzip/Brotli 压缩
// 使用 vite-plugin-compression
import viteCompression from 'vite-plugin-compression'
plugins: [
viteCompression({
algorithm: 'gzip', // 或 'brotliCompress'
threshold: 10240 // 对大于 10KB 的文件压缩
})
]5. 图片优化
// 使用 vite-plugin-imagemin
import viteImagemin from 'vite-plugin-imagemin'
plugins: [
viteImagemin({
optipng: { optimizationLevel: 7 },
mozjpeg: { quality: 60 },
pngquant: { quality: [0.8, 0.9] }
})
]6. 依赖预构建优化
optimizeDeps: {
include: ['vue', 'vue-router', 'lodash-es'],
exclude: ['jquery'], // 避免重复构建
force: true // 强制重新预构建（调试用）
}7. 分析构建结果
// 使用 rollup-plugin-visualizer
import { visualizer } from 'rollup-plugin-visualizer'
plugins: [
visualizer({
open: true, // 自动打开分析页面
filename: 'stats.html'
})
]8. SSG/SSR 优化
// 针对静态站点生成 (SSG)
build: {
ssrManifest: true,
rollupOptions: {
input: 'src/entry-server.js'
}
}三、最佳实践总结
- 按需加载：使用动态
import()实现路由懒加载。 - 压缩资源：启用 Gzip/Brotli 和图片压缩。
- CDN 加速：将第三方库通过 CDN 引入。
- 代码分割：合理拆分 vendor 和业务代码。
- Tree Shaking：确保依赖使用 ESM 格式。
- 缓存策略：文件名带哈希 (
[name].[hash].js)。 - 分析工具：使用
rollup-plugin-visualizer分析包大小。
通过合理配置 Vite 的构建选项和优化插件，可显著提升应用性能和加载速度。建议根据项目需求选择优化策略，并通过构建分析工具持续优化。
