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

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
// import vueDevTools from 'vite-plugin-vue-devtools'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import pxtovw from 'postcss-px-to-viewport'
// https://vite.dev/config/
export default defineConfig({
    publicDir: 'public',
    base: '/fvue',
    plugins: [
        vue(),
        vueJsx(),
        // vueDevTools(),
        AutoImport({
            imports: ['vue', 'vue-router', 'pinia'],
            resolvers: [ElementPlusResolver()],
            dts: true // 生成类型声明文件
        }),
        Components({
            resolvers: [ElementPlusResolver()]
        })
    ],
    server: {
        port: 8699,
        strictPort: true,
        host: true,
        proxy: {
            '/api': {
                target: process.env.VITE_APP_API_BASEURL,
                changeOrigin: true,
                rewrite: (path) => path.replace(/^\/api/, '')
            }
        }
    },
    css: {
        // 配置 css modules 的行为
        modules: {},
        // postCss 配置
        postcss: {
            plugins: [
                new pxtovw({
                    unitToConvert: 'px', //需要转换的单位，默认为"px"；
                    viewportWidth: 1920, //设计稿的视口宽度
                    unitPrecision: 5, //单位转换后保留的小数位数
                    propList: ['*'], //要进行转换的属性列表,*表示匹配所有,!表示不转换
                    viewportUnit: 'vw', //转换后的视口单位
                    fontViewportUnit: 'vw', //转换后字体使用的视口单位
                    selectorBlackList: [], //不进行转换的css选择器，继续使用原有单位
                    minPixelValue: 1, //设置最小的转换数值
                    mediaQuery: false, //设置媒体查询里的单位是否需要转换单位
                    replace: true, //是否直接更换属性值，而不添加备用属性
                    exclude: [] //忽略某些文件夹下的文件
                })
            ]
        },
        //指定传递给 css 预处理器的选项
        preprocessorOptions: {
            scss: {
                additionalData: `@use "@/assets/css/element-variables.scss" as *; $injectedColor:orange;`
            }
        }
    },
    resolve: {
        alias: {
            '@': fileURLToPath(new URL('./src', import.meta.url))
        }
    }
})