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

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

import { createStyleImportPlugin } from 'vite-plugin-style-import';

import legacy from '@vitejs/plugin-legacy'

// https://vitejs.dev/config/
export default defineConfig({
  base: '', // 开发或生产环境服务的公共基础路径 配置引入相对路径
  server: {
    // 是否自动打开浏览器
    open: true,
    // 服务器主机名，如果允许外部访问，可设置为"0.0.0.0"
    host: '0.0.0.0',
    // 服务器端口号
    port: 9898,
    // 为开发服务器配置 CORS
    cors: true,
  },
  // plugins: [vue()],
  plugins: [vue(),
    legacy({
      targets: ['defaults', 'ie >= 11', 'chrome 52'],  //需要兼容的目标列表，可以设置多个
    }),
    createStyleImportPlugin({
      libs: [
        {
          libraryName: 'element-plus',
          esModule: true,
          ensureStyleFile: true,
          resolveStyle: (name) => {
            name = name.slice(3);
            return `element-plus/theme-chalk/src/${name}.css`;
          },
        },
      ],
      // 添加主题配置
      useTheme: true,
      preprocessor: 'sass',
      themeVariables: [
        '@primary-color'
      ],
      themeColors: {
        'primary-color': '#ccff33'
      }
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})
