import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
import { defineConfig, loadEnv, ConfigEnv } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver, VantResolver } from 'unplugin-vue-components/resolvers'
import pxtovw from 'postcss-px-to-viewport'
import vueJsx from '@vitejs/plugin-vue-jsx'

const viteConfig = defineConfig((mode: ConfigEnv) => {
  const env = loadEnv(mode.mode, process.cwd())
  console.log(mode.command, env)
  return {
    plugins: [
      vue(),
      vueJsx(),
      AutoImport({
        imports: ['vue', 'vue-router'],
        resolvers: [ElementPlusResolver(), VantResolver()],
      }),
      Components({
        resolvers: [ElementPlusResolver(), VantResolver()],
      })
    ],
    resolve: {
      alias: {
        '@': resolve(__dirname, './src'),
      },
    },
    base: '/', // 打包路径
    server: {
      open: false, // 服务启动时是否自动打开浏览器
      hmr: true, // 开启热更新
      proxy: {
        '/api': {
          target: env.VITE_BASE_URL,
          changeOrigin: true,
          ws: true,
          secure: false,
          rewrite: (path) => path.replace(/^\/api/, ''),
        },
      },
    },
    css: {
      postcss: {
        plugins: [
          pxtovw({
            viewportWidth: 375,
            viewportUnit: 'vw',
          }),
        ],
      },
      preprocessorOptions: {
        // sass config
        scss: {
          additionalData: `@import "./src/styles/variables.scss";`,
        },
      },
    },
    define: {
      'process.env': env,
    },
  }
})

export default viteConfig