import { defineConfig, loadEnv } from "vite";
import vue from "@vitejs/plugin-vue";
import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
import { resolve } from "path";
import vueJsx from '@vitejs/plugin-vue-jsx'
import { VITE_APP_BASE_API, VITE_PUBLIC_PATH } from './config.js';

// https://vite.dev/config/
export default defineConfig(({ mode }) => {
  // 加载环境变量
  const env = loadEnv(mode, process.cwd(), "");
  return {
    plugins: [
      AutoImport({
        imports: ["vue", "vue-router", "pinia"],
        // 自动导入自定义目录下的导出
        dirs: [],
        resolvers: [ElementPlusResolver()],
        dts: resolve(__dirname, "src/auto-imports.d.ts"), // 生成自动导入的声明文件
      }),
      Components({
        resolvers: [ElementPlusResolver()],
      }),
      vue(),
      vueJsx()
    ],
    resolve: {
      alias: {
        "@": resolve(__dirname, "src"),
        "@assets": resolve(__dirname, "src/assets"),
        "@components": resolve(__dirname, "src/components"),
      },
    },
    base: VITE_PUBLIC_PATH,
    // 服务配置
    server: {
      host: "0.0.0.0",
      port: 3000,
      open: true, // 自动打开浏览器
      cors: true, // 允许跨域
      strictPort: false, // 端口被占用时是否尝试使用下一个可用端口
      proxy: {
        // 代理配置
        "/api": {
          target: VITE_APP_BASE_API,
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/api/, "")
        },
      },
    },

    // 构建配置
    build: {
      outDir: "dist",
      assetsDir: "static",
      sourcemap: false,
      minify: "terser",
      terserOptions: {
        compress: {
          drop_console: false,
          drop_debugger: false,
        },
      },
      rollupOptions: {
        output: {
          chunkFileNames: "static/js/[name]-[hash].js",
          entryFileNames: "static/js/[name]-[hash].js",
          assetFileNames: "static/[ext]/[name]-[hash].[ext]",
          manualChunks: {
            vendor: ["vue", "vue-router"],
            utils: ["lodash", "axios"],
          },
        },
      },
    },
    // CSS 配置
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: `@use "@/styles/element/index.scss" as *;`,
        },
      },
    },
  };
});