import vue from "@vitejs/plugin-vue";
import vueJsx from "@vitejs/plugin-vue-jsx";
import path from "path";
import AutoImport from "unplugin-auto-import/vite";
import { ElementPlusResolver, NaiveUiResolver } from "unplugin-vue-components/resolvers";
import Components from "unplugin-vue-components/vite";
import { loadEnv } from "vite";
import vitePluginCompression from "vite-plugin-compression";
import { createHtmlPlugin } from "vite-plugin-html";
import Inspect from "vite-plugin-inspect";
import requireTransform from "vite-plugin-require-transform";
import { createSvgIconsPlugin } from "vite-plugin-svg-icons";
import vueDevTools from 'vite-plugin-vue-devtools';
import svgLoader from "vite-svg-loader";

export default ({ mode }) => {
  const env = loadEnv(mode, process.cwd());
  return {
    envDir: "./env",
    plugins: [
      vue(),
      vueDevTools({
        enabled: 'trae',
      }),
      // vueDevTools({
      //   launchEditor: 'webstorm',
      // }),
      vueJsx(),
      Inspect(),
      vueDevTools(),
      requireTransform({
        fileRegex: /.vue$|.png$|.ts$|.jpg$|.svg$/,
      }), //配置require
      createSvgIconsPlugin({
        iconDirs: [path.resolve(process.cwd(), "src/icons")],
        symbolId: "icon-[dir]-[name]",
      }),
      vitePluginCompression(),
      AutoImport({
        imports: [
          "vue",
          {
            "naive-ui": [
              "useDialog",
              "useMessage",
              "useNotification",
              "useLoadingBar",
            ],
          },
        ],
        resolvers: [ElementPlusResolver()], // 合并 ElementPlus 的配置
      }),
      Components({
        resolvers: [NaiveUiResolver(), ElementPlusResolver()], // 合并组件解析器
        dirs: ["src/components"],
        extensions: ["vue"],
        deep: true,
      }),
      Components({
        resolvers: [ElementPlusResolver()],
      }),
      svgLoader(),
      createHtmlPlugin({
        inject: {
          data: {
            title: env.VITE_APP_TITLE || "管理系统",
          },
        },
      }),
    ],
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: '@import "@/assets/css/common.scss";',
          // 在开发过程中关闭Sass弃用警告（如@import）

          silenceDeprecations: ["import", "global-builtin"],
          // 使用现代编译器API来避免遗留的JS API警告

          api: "modern-compiler",
          // 只显示我们代码中的弃用，不显示依赖关系

          quietDeps: true,
        },
      },
    },
    resolve: {
      extensions: [".mjs", ".js", ".ts", ".jsx", ".tsx", ".json", ".vue"],
      alias: [
        {
          find: "@/",
          replacement: path.resolve(process.cwd(), "src") + "/",
        },
      ],
    },
    server: {
      host: "0.0.0.0", // 监听所有网络接口
      open: true,
      hmr: true,
    },
    logLevel: "error",
    build: {
      minify: "esbuild", // 由 terser 改为 esbuild，构建速度提升约 20-40%
      sourcemap: false, // 关闭 sourcemap 生成，减少构建时间
      reportCompressedSize: false, // 关闭压缩大小报告，减少构建时间
      rollupOptions: {
        output: {
          manualChunks: {
            // 优化分包策略，提高缓存效率
            "vue-vendor": ["vue", "vue-router", "pinia"],
            "naive-ui": ["naive-ui"],
            "element-plus": ["element-plus"],
          },
        },
      },
      terserOptions: {
        // 清除console和debugger
        compress: {
          // drop_console: true,
          drop_debugger: true,
        },
      },
    },
  };
};