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

// https://vite.dev/config/
import postcssPxToViewport from 'postcss-px-to-viewport'

export default defineConfig({
  resolve: {
    alias: {
      '@': '/src' // Map '@' alias to 'src' directory    
    }
  },
  plugins: [vue({
    template: {
      compilerOptions: {
        isCustomElement: (tag) => tag.startsWith('wx-')
      }
    }
  })],
  css: {
    postcss: {
      plugins: [
        postcssPxToViewport({
          viewportWidth: 750, // 设计稿视口宽度
          unitPrecision: 5, // 转换后保留的小数位数
          propList: ['*'], // 需要转换的CSS属性（*表示所有属性）
          viewportUnit: 'vw', // 使用的视口单位
          fontViewportUnit: 'vw', // 字体使用的视口单位
          selectorBlackList: [], // 需要忽略的选择器
          minPixelValue: 1, // 小于等于1px不转换
          mediaQuery: false, // 是否在媒体查询中转换px
          replace: true, // 是否替换原有的px单位
          exclude: [/node_modules/], // 忽略node_modules目录
        })
      ]
    }
  },
  scss: {
    additionalData: `@use "./src/style/pages/h5.scss";`
  },
  devServer: {
    port: 80,
    host: '0.0.0.0',
    hot: true,
    disableHostCheck: true
  },
  server: {
    port: 80,
    host: '0.0.0.0',
    allowedHosts: ["www.auto.haodian.cn"],
    hot: true,
    disableHostCheck: true
  },
  build: {
    target: 'es2015',
    brotliSize: false,
    chunkSizeWarningLimit: 2000,
  }
})