import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import VueSetupExtend from 'vite-plugin-vue-setup-extend'
import AutoImport from 'unplugin-auto-import/vite'
import { createStyleImportPlugin, VantResolve } from 'vite-plugin-style-import'
import postCssPxToRem from 'postcss-pxtorem'
import legacy from '@vitejs/plugin-legacy'
import { resolve } from 'path'
import { viteVConsole } from 'vite-plugin-vconsole'
import visualizer from 'rollup-plugin-visualizer'
import Components from 'unplugin-vue-components/vite'
import { VantResolver } from 'unplugin-vue-components/resolvers'

// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
  const { VITE_ENV, VITE_CONSOLE } = loadEnv(mode, process.cwd())
  const isProd = VITE_ENV === 'production'
  const isVconsole = Number(VITE_CONSOLE)

  return {
    base: isProd ? './' : './', // 是否是生产环境
    build: {
      cssCodeSplit: false,
      chunkSizeWarningLimit: 2048,
      sourcemap: isProd
    },
    esbuild: {
      drop: isProd ? ['console', 'debugger'] : undefined
    },
    plugins: [
      legacy({
        targets: ['defaults', 'not IE 11']
      }),
      vue(),
      VueSetupExtend(),
      Components({
        dts: false,
        resolvers: [VantResolver()]
      }),
      AutoImport({
        // 后续vue/vue-router的API都不需要再单独import到setup里面了
        imports: ['vue', 'vue-router'],
        // dts: 'src/auto-imports...', // 可以自定义文件生成的位置与是否生成，默认是根目录下
        dts: false
      }),
      createStyleImportPlugin({
        resolves: [VantResolve()],
        libs: [
          {
            libraryName: 'vant',
            esModule: false,
            resolveStyle: (name) => {
              return `vant/es/${name}/style`
            }
          }
        ]
      }),
      viteVConsole({
        entry: [resolve('src/main.js')],
        localEnabled: isVconsole,
        enabled: isVconsole,
        config: {
          maxLogNumber: 1000,
          theme: 'light'
        }
      }),
      !isProd
        ? visualizer({
            open: true,
            gzipSize: true,
            brotliSize: true
          })
        : null
    ],
    resolve: {
      // 设置路径别名
      alias: {
        '@': resolve(__dirname, './src'),
        '~': resolve(__dirname, './src/assets')
      }
    },
    server: {
      hmr: true,
      port: 8080,
      host: true,
      open: true
    },
    css: {
      // css预处理器
      preprocessorOptions: {
        scss: {
          charset: false,
          additionalData: '@import "./src/assets/scss/index.scss";'
        }
      },

      postcss: {
        plugins: [
          postCssPxToRem({
            rootValue: 37.5,
            propList: ['*']
          })
        ]
      }
    }
  }
})