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

import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import autoprefixer from 'autoprefixer';
import postCssPxToRem from 'postcss-pxtorem';
import path from 'path'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'  //svg组件
import autoImport from 'unplugin-auto-import/vite' // 不需要手动导入vue, 
import setupExtend from 'vite-plugin-vue-setup-extend'  //keep-live 不需要写两个script
import ViteImages from 'vite-plugin-vue-images' //自动导入图片


// https://vitejs.dev/config/
export default defineConfig( ({ mode, command }) => {
  const env = loadEnv(mode, process.cwd())
  console.log("--------------------")
  console.dir(mode)
  console.dir(command)
  console.dir(env)
  if(command === 'build') {
    //代表生产环境 vite build
  } else if(command == 'serve') {
    //代表开发环境 vite 
  }

  if(mode == 'development') {
    //使用.env.devlopment
  } else if(mode == 'production') {
    //使用.env.production
  }

  return {
    plugins: [
      vue(
        {
          refTransform: true // 开启ref转换,  let count = $ref(1), count++, 不需要.value
        }
      ),
      AutoImport({
        resolvers: [ElementPlusResolver()],
      }),
      Components({
        resolvers: [ElementPlusResolver()],
      }),
      createSvgIconsPlugin({
        iconDirs: [path.resolve(process.cwd(), 'src/assets/icons/svg')],
        symbolId: 'icon-[dir]-[name]',
        svgoOptions: command === 'build'
      }),
      autoImport({
        imports: [
            'vue',
            'vue-router',
            'pinia'
        ],
        dts: false
      }),
      setupExtend(),
      ViteImages({
        dirs: ['src/assets/images'] // 指明图片存放目录
      })
    ],
    resolve: {
      alias: {
        '~': path.resolve(__dirname, './'),
        '@': fileURLToPath(new URL('./src', import.meta.url))
      },
      extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue']
    },
    server: {
      port: 8088,
      host: true,
      open: false,
      proxy: {
        // https://cn.vitejs.dev/config/#server-proxy
        '/dev-api': {
          target: 'http://vue.ruoyi.vip',
          changeOrigin: true,
          rewrite: (p) => p.replace(/^\/dev-api/, '')
        },
        '/admin': {
          target: 'https://ybzd.ncyunqi.com/admin',
          changeOrigin: true,
          rewrite: (p) => p.replace(/^\/admin/, '')
        },
        '/prod-api': {
          target: 'http://vue.ruoyi.vip/prod-api',
          changeOrigin: true,
          rewrite: (p) => p.replace(/^\/prod-api/, '')
        }
      }
    },
    css: {
      preprocessorOptions: {
        less: {
          math: "always", // 括号内才使用数学计算
          globalVars: {
            // 全局变量
            //mainColor: "red",
          },
        },
        scss: {
          //additionalData: '@import "@/assets/scss/global.scss";'
        }
      },
      postcss: {
        plugins: [
          autoprefixer({
            overrideBrowserslist: ['Android 4.1', 'iOS 7.1', 'Chrome > 31', 'ff > 31', 'ie >= 8'],
          }),
          postCssPxToRem({
            // 自适应，px>rem转换
            rootValue: 192.1,//75, // 75表示750设计稿，37.5表示375设计稿
            propList: ['*'], // 需要转换的属性，这里选择全部都进行转换
            selectorBlackList: ['norem'], // 过滤掉norem-开头的class，不进行rem转换
          }),
        ],
      },
    },
  }
})