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

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

typescript
 代码解读
复制代码
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. 代码分割优化

typescript
 代码解读
复制代码
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. 静态资源处理

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

3. 兼容性处理

typescript
 代码解读
复制代码
// 安装旧浏览器支持插件
npm install @vitejs/plugin-legacy -D

// 配置
legacy({
  targets: ['> 0.5%', 'last 2 versions'],
  modernPolyfills: true
})

自定义打包命令

json
 代码解读
复制代码
// 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
 代码解读
复制代码
# .env.production
VITE_API_BASE_URL = /api/
VITE_SOURCEMAP = false

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

优化建议

1. 图片压缩：

   bash
    代码解读
   复制代码
   npm install vite-plugin-imagemin -D
   

   typescript
    代码解读
   复制代码
   import imagemin from 'vite-plugin-imagemin'
   // 添加到plugins数组
   imagemin({
     gifsicle: { optimizationLevel: 7 },
     optipng: { optimizationLevel: 7 }
   })
   

2. Gzip压缩：

   bash
    代码解读
   复制代码
   npm install vite-plugin-compression -D
   

   typescript
    代码解读
   复制代码
   import compression from 'vite-plugin-compression'
   // 添加到plugins数组
   compression({
     algorithm: 'gzip',
     ext: '.gz'
   })
   

3. CDN加速：

   typescript
    代码解读
   复制代码
   // vite.config.ts
   build: {
     rollupOptions: {
       external: ['vue', 'element-plus'],
       output: {
         globals: {
           'vue': 'Vue',
           'element-plus': 'ElementPlus'
         }
       }
     }
   }
   

常见打包问题解决

1. 文件体积过大：

   • 使用rollup-plugin-visualizer分析包组成
   • 按需加载第三方库（如Element Plus）
   • 开启Gzip/Brotli压缩

2. 路由懒加载失效：

   typescript
    代码解读
   复制代码
   // 确保使用动态导入语法
   component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
   

3. 静态资源404：

   typescript
    代码解读
   复制代码
   // 使用绝对路径
   new URL(`/src/assets/image.png`, import.meta.url).href
   

4. 样式丢失：

   typescript
    代码解读
   复制代码
   // 强制CSS注入
   build: {
     cssTarget: 'chrome61' // 兼容低版本浏览器
   }
   

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

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

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