import { fileURLToPath, URL } from 'node:url'
// import path from 'path'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// 引入插件，用于搭配setup语法糖对组件名注册，使用方式是可以在setup标签上直接添加name属性
// import vueSetupExtend from 'vite-plugin-vue-setup-extend'
// @ts-ignore
import DefineOptions from 'unplugin-vue-define-options/vite';

// 用于UI组件库组件和自定义组件的自动引入
import MyComponents from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

// vue3等插件 hooks 自动引入 unplugin-auto-import/vite
// 用于elmentPlus自动引入 按需引入
import MyAutoImport from 'unplugin-auto-import/vite'


// Auto import icon components
// 自动导入图标组件 
import IconsResolver from 'unplugin-icons/resolver'

// https://vitejs.dev/config/
export default defineConfig({
  envPrefix: 'HCWL',
  plugins: [
    vue(),
    DefineOptions(),
    MyComponents({
      resolvers: [
        ElementPlusResolver(),// 自动导入 Element Plus 组件
        IconsResolver({
          enabledCollections: ['ep'],// 自动注册图标组件
        }),
      ],
      // 指定组件位置，默认是src/components
      dirs: ['src/components'],
      // dirs: ['src/components','src/layout'],
      extensions: ['vue'], // 自动导入 Vue 相关函数，如：ref, reactive, toRef 等
      //  // 配置文件生成位置
      dts: 'src/components.d.ts'
    }),
    MyAutoImport({
      resolvers: [
        ElementPlusResolver(),// 自动导入 Element Plus 相关函数，如：ElMessage, ElMessageBox... (带样式)
        IconsResolver({
          prefix: 'Icon',// 自动导入图标组件
        }),
      ],
      imports: [
        'vue',
        // 'vue-router', 
        // 'vue-i18n', 
        // '@vueuse/head', 
        // '@vueuse/core'
      ],
      // 可以选择auto-import.d.ts生成的位置，使用ts建议设置为'src/auto-import.d.ts'
      dts: 'src/auto-import.d.ts',
      eslintrc: {
        enabled: true
      },
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
    // alias: {
    //   "@": path.resolve("./src") // 相对路径别名配置，使用 @ 代替 src
    // }
  },
  server: {
    host: '0.0.0.0',
    // open: true,//启动项目自动弹出浏览器
    port: 8084,//启动端口 解决跨域的配置
    // proxy: {
    //   '/api': {
    //     target: 'https://dxapp.sixhuo.com',
    //     changeOrigin: true,
    //     //类比与webpack里面的pathRewrite
    //     rewrite: (path) => path.replace(/^\/api/, "")
    //   },
    //   '/formalapi': {
    //     target: 'https://app-server.superjuanjuan.com/dxapp',
    //     changeOrigin: true,
    //     //类比与webpack里面的pathRewrite 
    //     rewrite: (path) => path.replace(/^\/formalapi/, "")
    //   }
    // },
  },
  build: {
    // 构建项目时，经常会遇到下面这样的分块儿建议提示，主要的意思单个模块文件超过了默认块儿限制，建议进行代码分块儿后进行动态导入可以加速页面加载速度。
    /*
      (!) Some chunks are larger than 500 KiB after minification. Consider:
      - Using dynamic import() to code-split the application
      - Use build.rollupOptions.output.manualChunks to improve chunking: https://rollupjs.org/guide/en/#outputmanualchunks
      - Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.    
    */
    //  加大限制的大小将500kb改成1000kb或者更大
    // chunkSizeWarningLimit: 20000,
    chunkSizeWarningLimit: 1500,
    // 分解块，将大块分解成更小的块
    rollupOptions: {
      output: {
        manualChunks(id) {
          if (id.includes('node_modules')) {
            return id.toString().split('node_modules/')[1].split('/')[0].toString();
          }
        }
      }
    }
  },
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@use "src/assets/styles/variables.scss" as *;`
      }
    }
  }
})