import { defineConfig, loadEnv } from "vite";
import vue from "@vitejs/plugin-vue";
import { resolve } from "path";
import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";
// 按需引入 ElementPlus  vant
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
import { VantResolver } from "unplugin-vue-components/resolvers";

// 生成.gz文件
import viteCompression from "vite-plugin-compression";

// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
    let env = loadEnv(mode, process.cwd());
    return {
        plugins: [
            vue(),
            AutoImport({
                // 自动导入vue相关的Api
                imports: ["vue", "vue-router"],
                resolvers: [ElementPlusResolver()],
            }),
            Components({
                resolvers: [ElementPlusResolver(), VantResolver()],
            }),
            {
                ...viteCompression(),
                apply: "build",
            },
        ],
        resolve: {
            // 配置路径别名
            alias: {
                "@": resolve(__dirname, "./src"),
            },
        },
        css: {
            // CSS 预处理器
            preprocessorOptions: {
                //define global scss variable
                scss: {
                    javascriptEnabled: true,
                    additionalData: `@import "@/styles/variables.scss";`,
                },
            },
        },

        server: {
            host: "0.0.0.0",
            port: 8081,
            open: true,
            https: false,
            proxy: {
                "/api": {
                    target: env.VITE_BASE_URL,
                    changeOrigin: true,
                    ws: true,
                    rewrite: path => path.replace(/^\/api/, ""),
                },
            },
        },
        build: {
            rollupOptions: {
                output: {
                    manualChunks: {
                        vue: ["vue", "pinia", "vue-router"],
                        elementIcons: ["@element-plus/icons-vue"],
                    },
                    chunkFileNames: "wap/js/[name]-[hash].js",
                    entryFileNames: "wap/js/[name]-[hash].js",
                    assetFileNames: "wap/[ext]/[name]-[hash].[ext]",
                },
            },
        },
    };
});