vite详细打包配置，包含性能优化、资源处理...
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 *;`
}
}
}
}
})