import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import path from 'path';
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx' // 开启jsx配置
import postCssPxToRem from 'postcss-pxtorem';
import viteCompression from 'vite-plugin-compression' // 开启gizp 压缩
import viteImagemin from 'vite-plugin-imagemin' // 图片压缩
import AutoImport from 'unplugin-auto-import/vite'; // 自动引入
import autoprefixer from 'autoprefixer' // css 添加内核前缀
import removeConsole from 'vite-plugin-remove-console'; // 删除console
// https://vitejs.dev/config/
export default defineConfig({
  // 插件
  plugins: [
    vue(),
    vueJsx(),
    removeConsole(),
    AutoImport({
      // 自动引入的api从这里找
      imports: ['vue', 'vue-router', 'pinia'],
      // 根据项目情况配置eslintrc，默认是不开启的
      eslintrc: {
        enabled: false, // Default `false`
        filepath: './.eslintrc-auto-import.json', // Default `./.eslintrc-auto-import.json`
        globalsPropValue: true // Default `true`, (true | false | 'readonly' | 'readable' | 'writable' | 'writeable')
      }
    }),
    viteCompression({
      verbose: true, // 是否在控制台输出压缩结果，默认为 true
      disable: false, // 压缩后是否删除原文件，默认为 false
      threshold: 1024 * 1000, // 对大于 1MB 的文件进行压缩
      algorithm: 'gzip', // 采用的压缩算法，默认是 gzip
      ext: '.gz', // 生成的压缩包后缀
      deleteOriginFile: false //是否禁用压缩，默认为 false
    }),
    viteImagemin({
      // gif图片压缩
      gifsicle: {
        optimizationLevel: 3, // 选择1到3之间的优化级别
        interlaced: false // 隔行扫描gif进行渐进式渲染
        // colors: 2 // 将每个输出GIF中不同颜色的数量减少到num或更少。数字必须介于2和256之间。
      },
      // png
      optipng: {
        optimizationLevel: 7 // 选择0到7之间的优化级别
      },
      // jpeg
      mozjpeg: {
        quality: 20 // 压缩质量，范围从0(最差)到100(最佳)。
      },
      // png
      pngquant: {
        quality: [0.8, 0.9], // Min和max是介于0(最差)到1(最佳)之间的数字，类似于JPEG。达到或超过最高质量所需的最少量的颜色。如果转换导致质量低于最低质量，图像将不会被保存。
        speed: 4 // 压缩速度，1(强力)到11(最快)
      },
      // svg压缩
      svgo: {
        plugins: [
          {
            name: 'removeViewBox'
          },
          {
            name: 'removeEmptyAttrs',
            active: false
          }
        ]
      }
    })
  ],
  // mode: 'development', // 模式
  base: './', // 开发或生产环境服务的公共基础路径
  publicDir: false, //静态资源服务的文件夹
  // cacheDir: 'node_modules/.vite', //存储缓存文件的目录
  resolve: {
    // 文件系统路径别名
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
      '@components': fileURLToPath(new URL('./src/components', import.meta.url)),
      '@utils': fileURLToPath(new URL('./src/utils', import.meta.url)),
      '@assets': fileURLToPath(new URL('./src/assets', import.meta.url))
    },
    //导入时想要省略的扩展名列表
    extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json']
  },
  // css
  css: {
    postcss: {
      plugins: [
        postCssPxToRem({
          rootValue: 37.5, // （设计稿/10）1rem的大小
          propList: ['*'] // 需要转换的属性，这里选择全部都进行转换
        }),
        autoprefixer({ // 自动添加前缀
          overrideBrowserslist: [
            'Android 4.1',
            'iOS 7.1',
            'Chrome > 31',
            'ff > 31',
            'ie >= 8'
            //'last 2 versions', // 所有主流浏览器最近2个版本
          ],
          grid: true
        })
      ]
    },
    preprocessorOptions: { //less 地址
      less: {
        modifyVars: {
          hack: `true; @import (reference) "${path.resolve('src/assets/less/default.less')}";`
        },
        javascriptEnabled: true
      }
    }
  },
  // 静态服务器 用于代理等
  server: {
    // usePolling 当需要再 Windows Subsystem for Linux (WSL) 2 上运行 Vite 时，如果项目文件夹位于 Windows 文件系统中，你需要将此选项设置为 { usePolling: true }。这是由于 Windows 文件系统的 WSL2 限制 造成的。
    // usePolling 会导致高 CPU 占用率
    usePolling: true,
    host: '0.0.0.0', // 启用本地IP
    port: 5000, // 端口号
    open: true, // 自动在浏览器打开
    https: false, // 是否开启 https
    cors: true, // 允许跨域
    hmr: true, //开启热更新
    strictPort: false, // 若端口已被占用则会直接退出
    proxy: {
      // 带选项写法：http://localhost:5173/api/bar -> http://jsonplaceholder.typicode.com/bar
      '/api': {
        target: 'http://192.168.2.199:9090',
        changeOrigin: true,
        rewrite: (url) => url.replace(/^\/api/, '')
      },
      // 代理 websockets 或 socket.io 写法：ws://localhost:5173/socket.io -> ws://localhost:5174/socket.io
      '/socket.io': {
        target: 'ws://localhost:5174',
        ws: true
      }
    }
  },
  // 构建选项
  build: {
    outDir: 'dist', //指定输出路径（相对于 项目根目录).
    target: ['chrome80'], // 浏览器兼容性 默认： 'modules' 自定义目标也可以是一个 ES 版本（例如：es2015）、一个浏览器版本（例如：chrome58）
    cssTarget: ['chrome80'], // 与 build.target 一致
    assetsDir: 'assets', // 指定生成静态资源的存放路径（相对于 build.outDir）
    assetsInlineLimit: 4096, // 小于此阈值的导入或引用资源将内联为 base64 编码，以避免额外的 http 请求。设置为 0 可以完全禁用此项。
    cssCodeSplit: true, //启用/禁用 CSS 代码拆分 如果指定了 build.lib，build.cssCodeSplit 会默认为 false
    // build.minify 设置为 false 可以禁用最小化混淆，或是用来指定使用哪种混淆器。默认为 Esbuild，它比 terser 快 20-40 倍，压缩率只差 1%-2%。
    // build.minify 当设置为 'terser' 时必须先安装 Terser。
    minify: 'esbuild',
    reportCompressedSize: true, // 启用/禁用 gzip 压缩大小报告 禁用提示速度
    chunkSizeWarningLimit: 500, // 规定触发警告的 chunk 大小。
    // 自定义底层的 Rollup 打包配置
    rollupOptions: {
      output: {
        chunkFileNames: 'static/js/[name]-[hash].js',
        entryFileNames: 'static/js/[name]-[hash].js',
        assetFileNames: 'static/[ext]/[name]-[hash].[ext]',
        manualChunks: id => {
          // 使用函数形式时，每个解析的模块 id 都会传递给函数。
          // 如果返回字符串，则模块及其所有依赖项将添加到具有给定名称的手动块中。
          // 例如，这将创建一个vendor包含所有依赖项的块node_modules：
          if (id.includes('node_modules')) {
            return id.toString().split('node_modules/')[1].split('/')[0].toString();
          }
        }
      }
    }
  },
  //预览选项
  preview: {
    host: '0.0.0.0', //为开发服务器指定 ip 地址
    port: '4173', // 指定开发服务器端口
    strictPort: true, // 如果端口已被使用，则直接退出
    https: false, // 是否开启 https
    open: true, // 开发服务器启动时，自动在浏览器中打开应用程序
    // proxy 代理
    cors: true // 允许跨域
    // headers 指明服务器返回的响应头。
  }
})