import { defineConfig, loadEnv } from 'vite'
import { join } from 'path'
import vue from '@vitejs/plugin-vue'
import eslintPlugin from 'vite-plugin-eslint'
import postcsspxtoviewport from 'postcss-px-to-viewport'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import { createHtmlPlugin } from 'vite-plugin-html';
import codeVersionPlugin from './build/vite-plugin-code-version.js'
import path from 'path'

export default ({ mode }) => {
  process.env = { ...process.env, ...loadEnv(mode, process.cwd()) }

  return defineConfig({
    plugins: [
      vue(),
      codeVersionPlugin(),
      eslintPlugin({
        include: ['src/**/*.js', 'src/**/*.vue', 'src/*.js', 'src/*.vue']
      }),
      createSvgIconsPlugin({
        iconDirs: [path.resolve(process.cwd(), 'src/icons')],
        symbolId: 'icon-[dir]-[name]',
        inject: 'body-first',
        customDomId: '__svg__icons__dom__'
      }),
      createHtmlPlugin({
        inject: {
          data: {
            ...process.env
          },
        },
      })
    ],
    base: process.env.VITE_PUBLICPATH,
    server: {
      port: 5173,
      proxy: {
        [process.env.VITE_BASE_API]: {
          target: process.env.VITE_DEV_SERVER,
          changeOrigin: true
        }
      }
    },
    resolve: {
      alias: {
        '@': join(__dirname, 'src')
      }
    },
    css: {
      preprocessorOptions: {
        scss: {
          // additionalData: `@import "@/styles/global.scss";`
        }
      },
      postcss: {
        plugins: [
          postcsspxtoviewport({
            viewportWidth: 750,
            viewportUnit: 'vw',
            exclude:[/node_modules\/(vant|element-plus)/i]
          }), 
          postcsspxtoviewport({
            viewportWidth: 375,
            viewportUnit: 'vw',
            exclude: [/^(?!.*node_modules\/(vant|element-plus))/] //忽略除vant之外的
          })
        ]
      },
    },
    build: {
      rollupOptions: {
        output: {
          chunkFileNames: (chunkInfo) => {
            if (/[^a-zA-Z0-9\-._~]/.test(chunkInfo.name)) {
              return 'assets/[hash].js'
            } else {
              return 'assets/[name]-[hash].js'
            }
          },
          assetFileNames: (chunkInfo) => {
            if (/[^a-zA-Z0-9\-._~]/.test(chunkInfo.name)) {
              return 'assets/[hash][extname]'
            } else {
              return 'assets/[name]-[hash][extname]'
            }
          },
          entryFileNames: 'assets/entry-[hash].js',
          manualChunks: (path) => {
            if (path.includes('element-plus')) {
              return 'element-plus'
            }
            if (path.includes('node_modules')) {
              return 'vendor'
            }
          }
        }
      }
    }
  })
}