import { defineConfig, loadEnv } from 'vite';
import path from 'path';
import react from '@vitejs/plugin-react';
import tailwindcss from "@tailwindcss/vite";

export default defineConfig(({ mode, command }) => {
  const env = loadEnv(mode, path.join(process.cwd(), 'env'));
  return {
    envDir: './env',// 环境目录
    css: {
      preprocessorOptions: {
        less: {// 全局导入
          charset: false,
          additionalData: '@import "@/style/global.less";',
        }
      }
    },
    resolve: {
      // 别名
      alias: [
        {
          find: '@',
          replacement: path.resolve(__dirname, 'src'),
        }
      ],
      // 忽略文件后缀名
      extensions: ['.js', '.jsx', '.ts', '.tsx', '.less', '.json']
    },
    server: {
      // 监听所有地址
      host: '0.0.0.0',
      // 端口号
      port: 3100,
      // 自动打开浏览器
      open: true,
      // 热更新配置
      hmr: {
        // 不指定 host，让 Vite 自动使用客户端的主机名
        // 这样可以支持 localhost 和 IP 地址访问
        port: 3100, // 使用相同的端口
        protocol: 'ws', // WebSocket 协议
      },
      // 自动更换可用端口
      strictPort: true,
      // 文件监听配置
      watch: {
        // 在某些文件系统上，需要启用轮询才能正确检测文件变化
        usePolling: true, // 启用轮询以确保文件变化能被检测到
        interval: 100, // 轮询间隔（毫秒）
        ignored: ['**/node_modules/**', '**/build/**'],
      },
      // 代理规则
      proxy: {
        '/api/-captchaImage': {
          // 开启跨域
          changeOrigin: true,
          // 转发地址
          target: env.VITE_API_URL_img,
          // 路径重写
          rewrite: (path) => path.replace(/^\/api\/-captchaImage/i, '')
        },
        '/api': {
          // 开启跨域
          changeOrigin: true,
          // 转发地址
          target: env.VITE_API_URL,
          // 路径重写
          rewrite: (path) => path.replace(/^\/api/, ''),
        }
      }
    },
    build: {
      outDir: 'build',// 打包文件目录
      chunkSizeWarningLimit: 10240,// chunk大于10M触发警告
      // 底层配置
      rollupOptions: {
        output: {
          entryFileNames: 'js/[name]-[hash].js',
          chunkFileNames: 'js/[name]-[hash].js',
        }
      },
    },
    esbuild: {
      drop: command === 'build' ? ['console', 'debugger'] : [],
    },
    plugins: [
      tailwindcss(),// TailwindCSS编译
      react({
        // 确保 Fast Refresh 能正确处理 HOC（如 observer）
        // 对于被高阶组件包装的组件，Fast Refresh 需要特殊处理
        jsxRuntime: 'automatic',
      }),// React编译（Fast Refresh 默认启用）
    ],
  }
})