import { defineConfig, loadEnv } from 'vite'; // 导入 Vite 的定义配置函数和环境变量加载函数
import vue from '@vitejs/plugin-vue'; // 导入 Vue 插件，使 Vite 支持 .vue 文件
import path from 'path'; // Node.js 标准库，用于处理和转换文件路径
import AutoImport from 'unplugin-auto-import/vite'; // 自动导入 API 插件
import Components from 'unplugin-vue-components/vite'; // 自动注册组件插件
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'; // 组件解析器，用于自动导入 Element Plus 组件
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'; // SVG 图标插件，将 SVG 文件转化为 Vue 组件
import viteCompression from 'vite-plugin-compression'; // 压缩构建输出文件的插件

// ESLint 插件，用于在开发期间进行代码检查
import eslintPlugin from 'vite-plugin-eslint';

export default defineConfig(({ command }) => ({
  plugins: [
    vue(), // 启用 Vue 插件

    // 创建 SVG 图标插件实例，配置图标目录和生成的 symbol ID 模板
    createSvgIconsPlugin({
      iconDirs: [path.resolve(process.cwd(), 'src/icons/svg')],
      symbolId: 'icon-[dir]-[name]'
    }),

    // 配置 AutoImport 插件以自动导入指定模块中的内容
    AutoImport({
      imports: ['vue', 'vue-router'], // 指定要自动导入的模块
      dirs: ['src/hooks/**', 'src/stores/**', 'src/utils/**'], // 包含自定义钩子、状态管理、工具函数的目录
      resolvers: command === 'build' ? [ElementPlusResolver()] : [], // 构建时使用 ElementPlusResolver 解析器
      dts: 'src/auto-import/imports.d.ts', // 自动生成类型声明文件的位置
      eslintrc: {
        enabled: false // 禁用对 .eslintrc 文件的自动更新
      }
    }),

    // 自动注册来自特定目录的 Vue 组件，并可选地使用解析器来处理第三方库中的组件
    Components({
      dirs: ['src/components'], // 包含组件的目录
      resolvers: command === 'build' ? [ElementPlusResolver()] : [], // 构建时使用 ElementPlusResolver 解析器
      dts: 'src/auto-import/components.d.ts' // 自动生成类型声明文件的位置
    }),

    // 使用 ESLint 插件检查 JavaScript 和 Vue 文件
    eslintPlugin({
      include: ['src/**/*.js', 'src/**/*.vue', 'src/*.js', 'src/*.vue'] // 指定要检查的文件模式
    }),

    // 对超过 1KB 的文件启用 gzip 或 brotli 压缩
    viteCompression({
      threshold: 1000,
    })
  ],

  // 开发服务器配置
  server: {
    host: true, // 允许外部访问
    port: 9527, // 设置服务端口
    open: true // 在启动时自动打开浏览器
  },

  // 路径别名配置
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'), // 将 @ 替换为 src 目录的绝对路径
      'vue-i18n': 'vue-i18n/dist/vue-i18n.cjs.js' // 强制使用兼容性更好的 vue-i18n 版本
    }
  },

  // 构建选项
  build: {
    base: './', // 构建后的资源基础路径
    rollupOptions: {
      output: {
        chunkFileNames: 'static/js/[name]-[hash].js', // 动态导入的代码分割块命名规则
        entryFileNames: 'static/js/[name]-[hash].js', // 入口文件命名规则
        assetFileNames: 'static/[ext]/[name]-[hash].[ext]', // 静态资源（如图片、字体等）命名规则

        // 手动拆分 chunks，通常用于优化包大小和缓存策略
        manualChunks(id) {
          if (id.includes('node_modules')) {
            if (id.toString().indexOf('.pnpm/') !== -1) {
              return id.toString().split('.pnpm/')[1].split('/')[0].toString();
            } else if (id.toString().indexOf('node_modules/') !== -1) {
              return id.toString().split('node_modules/')[1].split('/')[0].toString();
            }
          }
        }
      }
    },
    sourcemap: false, // 是否生成 source map 文件
    target: 'es2015', // 设置打包后代码的目标浏览器或 Node.js 版本
    reportCompressedSize: false // 不报告压缩后的包大小
  }
}));