import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import { fileURLToPath, URL } from 'node:url'
import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import legacy from '@vitejs/plugin-legacy'
import { createHtmlPlugin } from 'vite-plugin-html'
import { projectName } from './package.json'

// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
    // 为了在vite.config执行时能获取环境变量，使用loadEnv来获取
    // 依旧沿用mode来做区分
    const env = loadEnv(mode, process.cwd())
    return {
        base: env.VITE_STATIC_URL,
        plugins: [
            vue(),
            // 参考element-plus文档，自动导入组件
            AutoImport({
                resolvers: [
                    ElementPlusResolver(),
                    IconsResolver({
                        prefix: 'Icon'
                    })
                ]
            }),
            Components({
                resolvers: [
                    ElementPlusResolver(),
                    IconsResolver({
                        enabledCollections: ['ep']
                    })
                ]
            }),
            Icons({
                autoInstall: true
            }),
            legacy({
                additionalLegacyPolyfills: ['regenerator-runtime/runtime'] // 面向IE11
            }),
            createHtmlPlugin({
                minify: true,
                inject: {
                    data: {
                        title: projectName,
                        links: `<link href="/static/css/normalize.css" rel="stylesheet"/><link href="/static/css/main.css" rel="stylesheet"/>`
                    }
                }
            })
        ],
        resolve: {
            alias: {
                '@': fileURLToPath(new URL('./src', import.meta.url))
            }
        },
        build: {
            rollupOptions: {
                output: {
                    // manualChunks: {
                    //     echarts: ['echarts'],
                    //     lodash: ['lodash']
                    // }
                    manualChunks: (id) => {
                        if (id.includes('node_modules')) {
                            if (id.endsWith('.css')) {
                                return 'vendor'
                            }
                            if (id.includes('echarts')) {
                                return 'echarts'
                            }
                            if (id.includes('lodash')) {
                                return 'lodash'
                            }
                            if (id.includes('element-plus')) {
                                return 'elementPlus'
                            }
                        }
                    }
                }
            },
            minify: 'terser',
            terserOptions: {
                compress: {
                    drop_console: true,
                    drop_debugger: true
                }
            }
        }
    }
})