ogame-vue-ts/vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import tailwindcss from '@tailwindcss/vite'
import path from 'node:path'
import { fileURLToPath } from 'node:url'
import { VitePWA } from 'vite-plugin-pwa'
import pkg from './package.json'

const __dirname = path.dirname(fileURLToPath(import.meta.url))

// @ts-expect-error - Vite CSS transformer type
export default defineConfig(async () => {
  const plugins = [
    vue(),
    tailwindcss(),
    VitePWA({
      registerType: 'autoUpdate',
      manifest: {
        name: pkg.name,
        short_name: pkg.title,
        description: 'Conquer the stars',
        theme_color: '#000000',
        background_color: '#000000',
        display: 'fullscreen',
        orientation: 'any',
        icons: [
          {
            src: 'logo.svg',
            sizes: 'any',
            type: 'image/svg+xml',
            purpose: 'any'
          }
        ]
      },
      workbox: {
        globPatterns: ['**/*.{js,css,html,ico,png,svg,mp3,wav,json}'],
        maximumFileSizeToCacheInBytes: 5 * 1024 * 1024,
        runtimeCaching: [
          {
            urlPattern: ({ request }) => request.destination === 'image' || request.destination === 'audio',
            handler: 'CacheFirst', // 优先使用缓存
            options: {
              cacheName: 'game-assets',
              expiration: {
                maxEntries: 100,
                maxAgeSeconds: 30 * 24 * 60 * 60 // 缓存 30 天
              }
            }
          }
        ]
      }
    })
  ]

  // 只在 ELECTRON_BUILD 环境变量存在时才加载 Electron 插件
  if (process.env.ELECTRON_BUILD) {
    // @ts-ignore - 动态导入 electron 插件
    const { default: electron } = await import('vite-plugin-electron/simple')
    const electronPlugins = await electron({
      main: {
        entry: 'electron/main.ts'
      },
      renderer: {}
    })
    plugins.push(...electronPlugins)
  }

  return {
    base: './',
    build: {
      outDir: 'docs',
      sourcemap: false,
      cssCodeSplit: true,
      chunkSizeWarningLimit: 1000,
      rollupOptions: {
        output: {
          manualChunks(id: string) {
            // Vue 核心框架
            if (id.includes('node_modules/vue/') || id.includes('node_modules/@vue/')) return 'vendor-vue-core'
            // Vue 生态
            if (id.includes('node_modules/vue-router')) return 'vendor-vue-router'
            if (id.includes('node_modules/pinia')) return 'vendor-pinia'
            // UI 组件库
            if (id.includes('node_modules/reka-ui')) return 'vendor-reka-ui'
            if (id.includes('node_modules/@vueuse/core')) return 'vendor-vueuse'
            if (id.includes('node_modules/lucide-vue-next')) return 'vendor-icons'
            // 工具库
            if (id.includes('node_modules/crypto-js')) return 'vendor-crypto'
            if (id.includes('node_modules/file-saver')) return 'vendor-utils'
            if (id.includes('node_modules/clsx') || id.includes('node_modules/tailwind-merge')) return 'vendor-utils'
            // Tailwind CSS
            if (id.includes('node_modules/@tailwindcss') || id.includes('node_modules/tailwindcss')) return 'vendor-tailwind'
            // 游戏逻辑模块
            if (id.includes('/src/logic/')) return 'game-logic'
            // 配置和类型
            if (id.includes('/src/config/') || id.includes('/src/types/')) return 'game-config'
            // 本地化 - 只打包默认语言和index，其他语言通过动态导入自动分割
            if (id.includes('/src/locales/index') || id.includes('/src/locales/zh-CN')) return 'locale-default'
            // 其他语言文件不指定chunk，让Vite根据动态导入自动分割
            // 其他 node_modules 依赖
            if (id.includes('node_modules/')) return 'vendor-others'
          },
          // 优化输出文件名
          chunkFileNames: 'assets/[name]-[hash].js',
          entryFileNames: 'assets/[name]-[hash].js',
          assetFileNames: 'assets/[name]-[hash].[ext]'
        }
      }
    },
    plugins,
    resolve: { alias: { '@': path.resolve(__dirname, './src') } },
    css: {
      // 使用 lightningcss 处理 CSS，自动转换 oklch 等新语法为兼容格式
      transformer: 'lightningcss',
      lightningcss: {
        // 目标浏览器：Android 5+, iOS 10+, Chrome 60+
        targets: {
          android: 5 << 16, // Android 5.0
          chrome: 60 << 16, // Chrome 60
          ios_saf: 10 << 16 // iOS Safari 10
        },
        // 禁用现代 CSS 特性，确保兼容旧版浏览器
        drafts: {
          customMedia: false
        }
      }
    },
    // 优化依赖预构建
    optimizeDeps: { include: ['vue', 'vue-router', 'pinia', 'reka-ui', '@vueuse/core', 'lucide-vue-next', 'crypto-js', 'file-saver'] }
  }
})