it/frontend/vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
import { visualizer } from 'rollup-plugin-visualizer'

export default defineConfig({
  plugins: [
    vue(),
    // 打包体积分析插件
    visualizer({
      open: false,
      gzipSize: true,
      brotliSize: true,
      filename: 'dist/stats.html'
    })
  ],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    }
  },
  build: {
    // 启用代码分割
    rollupOptions: {
      output: {
        // 手动分割代码
        manualChunks(id) {
          // 将node_modules中的依赖分组
          if (id.includes('node_modules')) {
            // Element Plus
            if (id.includes('element-plus')) {
              return 'element-plus'
            }
            // Vue生态系统
            if (id.includes('vue') || id.includes('pinia') || id.includes('vue-router')) {
              return 'vue-vendor'
            }
            // 图表库
            if (id.includes('echarts')) {
              return 'charts'
            }
            // 工具库
            if (id.includes('axios') || id.includes('dayjs') || id.includes('lodash-es')) {
              return 'utils'
            }
            // 其他第三方库
            return 'vendor'
          }
          
          // 将业务代码按模块分组
          if (id.includes('src/views')) {
            return 'views'
          }
          if (id.includes('src/components')) {
            return 'components'
          }
          if (id.includes('src/stores')) {
            return 'stores'
          }
          if (id.includes('src/utils')) {
            return 'utils'
          }
          if (id.includes('src/services')) {
            return 'services'
          }
        },
        // 优化chunk命名
        chunkFileNames: (chunkInfo) => {
          // 根据模块类型生成不同的文件名
          const facadeModuleId = chunkInfo.facadeModuleId ? chunkInfo.facadeModuleId.split('/').pop() : 'chunk'
          return `js/[name]-[hash].js`
        }
      }
    },
    // 启用源码映射
    sourcemap: false,
    // 代码压缩
    minify: 'terser',
    terserOptions: {
      compress: {
        // 移除console
        drop_console: true,
        // 移除debugger
        drop_debugger: true
      }
    },
    // 启用CSS代码分割
    cssCodeSplit: true,
    // 优化chunk大小警告限制
    chunkSizeWarningLimit: 1000,
    // 设置输出目录
    outDir: 'dist',
    // 设置静态资源目录
    assetsDir: 'assets',
    // 优化资源内联阈值（小于此值的资源将内联为base64）
    assetsInlineLimit: 4096,
    // 启用CSS模块化
    cssTarget: 'chrome61',
    // 设置最大并行请求数
    maxParallelFileOps: 5
  },
  server: {
    port: 3000,
    proxy: {
      '/api': {
        target: 'http://localhost:5034',
        changeOrigin: true
      }
    }
  },
  // 优化依赖预构建
  optimizeDeps: {
    include: [
      'vue',
      'vue-router',
      'pinia',
      'axios',
      'element-plus',
      'element-plus/es/components/message/style/css',
      'element-plus/es/components/notification/style/css',
      'element-plus/es/components/message-box/style/css'
    ]
  },
  // PWA配置
  define: {
    __VUE_OPTIONS_API__: false,
    __VUE_PROD_DEVTOOLS__: false
  },
  // 确保Service Worker文件被正确复制
  publicDir: 'public',
  // 确保manifest.json被正确处理
  assetsInclude: ['**/*.svg', '**/*.png', '**/*.jpg', '**/*.jpeg', '**/*.gif', '**/*.webp']
})