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

// vite.config.ts
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

//rem
import postcssPxtoRem from 'postcss-pxtorem'

import { resolve } from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
  server:{
    host: '0.0.0.0',  //解决控制台： Network: use --host to expose
    port: 8086,       //配置端口号
    hmr: true,        //开启热更新
    open: true,       //启动在浏览器打开
    proxy: {          //跨域配置
      '/api': {
        target: 'http://localhost:8088/',	//实际请求地址
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      },
    }
  },
  // 配置别名
  resolve:{
    alias:[
      {
        find:'@',
        replacement: resolve(__dirname,'src')
      }
    ]
  },
  css: {
    postcss: {
      plugins: [
        postcssPxtoRem({
          rootValue: 150, // 按照自己的设计稿修改 1920/10
          unitPrecision: 5, // 保留到5位小数
          selectorBlackList: ['ignore', 'tab-bar', 'tab-bar-item'],  // 忽略转换正则匹配项
          propList: ['*'],
          replace: true,
          mediaQuery: false,
          minPixelValue: 0
        })  
      ]
    }
  }
})