import { fileURLToPath, URL } from 'node:url'

import { ConfigEnv, defineConfig, UserConfigExport } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import { VantResolver } from 'unplugin-vue-components/resolvers'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import { visualizer } from 'rollup-plugin-visualizer' //打包size分析工具
import AutoImport from 'unplugin-auto-import/vite' //自动导入 Composition API
import Components from 'unplugin-vue-components/vite' //组件自动按需引入
import compression from 'vite-plugin-compression' //gzip/br 压缩
import VueDevTools from 'vite-plugin-vue-devtools'

import autoprefixer from "autoprefixer"
import postcsspxtorem from "postcss-pxtorem"

function handleOutDirByMode(mode: string) {
  console.log('环境', mode)
  return 'dist'
}

// https://vitejs.dev/config/
export default ({ mode }: ConfigEnv): UserConfigExport => {
  return defineConfig({
    plugins: [
      vue(),
      vueJsx(),
      // gzip格式
      compression({
        threshold: 1024 * 500, // 体积大于 threshold 才会被压缩,单位 b
        ext: '.gz', // 压缩文件格式
        deleteOriginFile: false // 是否删除源文件
      }),
      AutoImport({
        resolvers: [ElementPlusResolver(), VantResolver()]
      }),
      Components({
        resolvers: [ElementPlusResolver({ importStyle: 'sass' }), VantResolver()]
      }),
      visualizer(),
      VueDevTools()
    ],
    resolve: {
      alias: {
        '@': fileURLToPath(new URL('./src', import.meta.url))
      }
    },
    css:{
      postcss:{
        plugins:[
          autoprefixer({
            overrideBrowserslist: [
              "Android 4.1",
              "iOS 7.1",
              "Chrome > 31",
              "ff > 31",
              "ie >= 8",
              "last 10 versions", // 所有主流浏览器最近10版本用
            ],
            grid: true
          }),
          postcsspxtorem({
            rootValue: 192, // 设计稿宽度的1/ 10 例如设计稿按照 1920设计 此处就为192
            propList: ["*", "!border"], // 除 border 外所有px 转 rem
            selectorBlackList: [".el-"], // 过滤掉.el-开头的class，不进行rem转换
          })
        ]
      }
    },
    server: {
      host: '0.0.0.0',
      port: 3000
    },
    build: {
      sourcemap: true,
      outDir: handleOutDirByMode(mode),
      cssCodeSplit: false, // 禁用 CSS 代码拆分,将整个项目中的所有 CSS 将被提取到一个 CSS 文件中
      target: 'esnext',
      minify: 'terser', // 混淆器，terser构建后文件体积更小 ,esbuild
      //小于此阈值的导入或引用资源将内联为 base64 编码，以避免额外的 http 请求。设置为 0 可以完全禁用此项
      assetsInlineLimit: 4096,
      assetsDir: 'static/img/', // 静态资源目录
      // rollup 打包配置
      rollupOptions: {
        output: {
          chunkFileNames: 'static/js/[name]-[hash].js',
          entryFileNames: 'static/js/[name]-[hash].js',
          assetFileNames: 'static/[ext]/[name]-[hash].[ext]'
        }
      },
      // 压缩配置
      terserOptions: {
        compress: {
          drop_console: false, // 生产环境移除console
          drop_debugger: true // 生产环境移除debugger
        }
      },
      commonjsOptions: {
        ignoreTryCatch: false
      }
    }
  })
}