一、以下是针对Vite项目的详细打包配置补充，包含性能优化、资源处理和特殊需求配置：

vite.config.ts 完整打包配置示例

import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { visualizer } from 'rollup-plugin-visualizer'
import legacy from '@vitejs/plugin-legacy'
import { terser } from 'rollup-plugin-terser'
// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
// 环境变量加载
const env = loadEnv(mode, process.cwd())
return {
plugins: [
vue(),
AutoImport({
resolvers: [ElementPlusResolver()],
dts: 'src/types/auto-imports.d.ts' // 自动导入类型声明
}),
Components({
resolvers: [ElementPlusResolver()],
dts: 'src/types/components.d.ts' // 组件类型声明
}),
// 打包分析插件（仅生产环境）
mode === 'production' && visualizer({
open: true,
gzipSize: true,
brotliSize: true
}),
// 浏览器兼容插件
legacy({
targets: ['defaults', 'not IE 11']
})
],
// 构建配置
build: {
target: 'es2015', // 编译目标
outDir: 'dist', // 输出目录
assetsDir: 'assets', // 静态资源目录
sourcemap: env.VITE_SOURCEMAP === 'true', // 按需开启
minify: 'terser', // 压缩方式
cssCodeSplit: true, // CSS代码分割

// Rollup配置
rollupOptions: {
output: {
// 代码分割策略
manualChunks(id) {
if (id.includes('node_modules')) {
return 'vendor'
}
if (id.includes('src/router')) {
return 'router'
}
},
// 文件命名规则
chunkFileNames: 'js/[name]-[hash].js',
entryFileNames: 'js/[name]-[hash].js',
assetFileNames: 'assets/[ext]/[name]-[hash][extname]'
},
// 外部依赖排除（如有需要）
external: ['some-cdn-library']
},
// Terser压缩配置
terserOptions: {
compress: {
drop_console: true, // 移除console
drop_debugger: true // 移除debugger
},
format: {
comments: false // 移除注释
}
}
},
// 开发服务器配置
server: {
port: 5173, // 开发端口
open: true // 自动打开浏览器
},
// 路径别名配置
resolve: {
alias: {
'@': '/src',
'#': '/types'
}
},
// CSS预处理器配置
css: {
preprocessorOptions: {
scss: {
additionalData: `@use "@/styles/variables.scss" as *;`
}
}
}
}
})

关键配置说明

1. 代码分割优化

rollupOptions: {
output: {
manualChunks(id) {
if (id.includes('node_modules')) {
// 将node_modules代码单独打包
if (id.includes('element-plus')) return 'element-plus'
if (id.includes('lodash')) return 'lodash'
return 'vendor'
}
}
}
}

2. 静态资源处理

build: {
assetsInlineLimit: 4096, // 小于4KB的资源转为base64
// 复制公共资源到dist目录
assetsInclude: ['public/**/*.pdf']
}

3. 兼容性处理

// 安装旧浏览器支持插件
npm install @vitejs/plugin-legacy -D
// 配置
legacy({
targets: ['> 0.5%', 'last 2 versions'],
modernPolyfills: true
})

自定义打包命令

// package.json
{
"scripts": {
"build": "vite build",
"build:stage": "vite build --mode staging",
"build:analyze": "vite build --mode production && vite preview --port 4173",
"preview": "vite preview --port 4173"
}
}

环境变量配置

# .env.production
VITE_API_BASE_URL = /api/
VITE_SOURCEMAP = false
# .env.staging
VITE_API_BASE_URL = http://stage-api.example.com

优化建议

1. 图片压缩：

npm install vite-plugin-imagemin -D

import imagemin from 'vite-plugin-imagemin'
// 添加到plugins数组
imagemin({
gifsicle: { optimizationLevel: 7 },
optipng: { optimizationLevel: 7 }
})

Gzip压缩：

npm install vite-plugin-compression -D

import compression from 'vite-plugin-compression'
// 添加到plugins数组
compression({
algorithm: 'gzip',
ext: '.gz'
})

CDN加速

// vite.config.ts
build: {
rollupOptions: {
external: ['vue', 'element-plus'],
output: {
globals: {
'vue': 'Vue',
'element-plus': 'ElementPlus'
}
}
}
}

常见打包问题解决

1. 文件体积过大：
2. 使用rollup-plugin-visualizer分析包组成
3. 按需加载第三方库（如Element Plus）
4. 开启Gzip/Brotli压缩

2.路由懒加载失效：

// 确保使用动态导入语法
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')

3.静态资源404

// 使用绝对路径
new URL(`/src/assets/image.png`, import.meta.url).href

4.样式丢失：

// 强制CSS注入
build: {
cssTarget: 'chrome61' // 兼容低版本浏览器
}

通过以上配置，可以实现：

• 代码体积优化（减少30%-50%）
• 首屏加载速度提升
• 更好的浏览器兼容性
• 清晰的构建产物结构
• 便捷的多环境打包支持

实际配置时需根据项目具体需求调整参数，建议结合vite build --mode yourmode实现多环境差异化打包。