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 添加內(nèi)核前綴
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'],
      // 根據(jù)項目情況配置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之間的優(yōu)化級別
        interlaced: false // 隔行掃描gif進行漸進式渲染
        // colors: 2 // 將每個輸出GIF中不同顏色的數(shù)量減少到num或更少。數(shù)字必須介于2和256之間。
      },
      // png
      optipng: {
        optimizationLevel: 7 // 選擇0到7之間的優(yōu)化級別
      },
      // jpeg
      mozjpeg: {
        quality: 20 // 壓縮質(zhì)量，范圍從0(最差)到100(最佳)。
      },
      // png
      pngquant: {
        quality: [0.8, 0.9], // Min和max是介于0(最差)到1(最佳)之間的數(shù)字，類似于JPEG。達到或超過最高質(zhì)量所需的最少量的顏色。如果轉(zhuǎn)換導致質(zhì)量低于最低質(zhì)量，圖像將不會被保存。
        speed: 4 // 壓縮速度，1(強力)到11(最快)
      },
      // svg壓縮
      svgo: {
        plugins: [
          {
            name: 'removeViewBox'
          },
          {
            name: 'removeEmptyAttrs',
            active: false
          }
        ]
      }
    })
  ],
  // mode: 'development', // 模式
  base: './', // 開發(fā)或生產(chǎn)環(huán)境服務的公共基礎路徑
  publicDir: false, //靜態(tài)資源服務的文件夾
  // cacheDir: 'node_modules/.vite', //存儲緩存文件的目錄
  resolve: {
    // 文件系統(tǒng)路徑別名
    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: ['*'] // 需要轉(zhuǎn)換的屬性，這里選擇全部都進行轉(zhuǎn)換
        }),
        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
      }
    }
  },
  // 靜態(tài)服務器 用于代理等
  server: {
    // usePolling 當需要再 Windows Subsystem for Linux (WSL) 2 上運行 Vite 時，如果項目文件夾位于 Windows 文件系統(tǒng)中，你需要將此選項設置為 { usePolling: true }。這是由于 Windows 文件系統(tǒng)的 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', // 指定生成靜態(tài)資源的存放路徑（相對于 build.outDir）
    assetsInlineLimit: 4096, // 小于此閾值的導入或引用資源將內(nèi)聯(lián)為 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, // 規(guī)定觸發(fā)警告的 chunk 大小。
    // 自定義底層的 Rollup 打包配置
    rollupOptions: {
      output: {
        chunkFileNames: 'static/js/[name]-[hash].js',
        entryFileNames: 'static/js/[name]-[hash].js',
        assetFileNames: 'static/[ext]/[name]-[hash].[ext]',
        manualChunks: id => {
          // 使用函數(shù)形式時，每個解析的模塊 id 都會傳遞給函數(shù)。
          // 如果返回字符串，則模塊及其所有依賴項將添加到具有給定名稱的手動塊中。
          // 例如，這將創(chuàng)建一個vendor包含所有依賴項的塊node_modules：
          if (id.includes('node_modules')) {
            return id.toString().split('node_modules/')[1].split('/')[0].toString();
          }
        }
      }
    }
  },
  //預覽選項
  preview: {
    host: '0.0.0.0', //為開發(fā)服務器指定 ip 地址
    port: '4173', // 指定開發(fā)服務器端口
    strictPort: true, // 如果端口已被使用，則直接退出
    https: false, // 是否開啟 https
    open: true, // 開發(fā)服務器啟動時，自動在瀏覽器中打開應用程序
    // proxy 代理
    cors: true // 允許跨域
    // headers 指明服務器返回的響應頭。
  }
})