import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';
import cnjmpostcsspxtoviewport from 'cnjm-postcss-px-to-viewport';
import path from 'path';
import VueSetupExtend from 'vite-plugin-vue-setup-extend';
import AutoImport from 'unplugin-auto-import/vite';

const Timestamp = new Date().getTime(); //随机时间戳

// const targetUrl = 'http://192.168.20.52:7300'; //杨辉
const targetUrl = 'https://server2.wh-nf.cn:8082/prod-api'; //线上

export default defineConfig({
  // 地址是和router中和ngix中配置的名称一致
  base: '/',
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()],
    }),
    VueSetupExtend(),
    AutoImport({
      imports: ['vue', 'vue-router', 'pinia'],
      dts: false,
    }),
  ],
  css: {
    postcss: {
      plugins: [
        cnjmpostcsspxtoviewport({
          unitToConvert: 'px', // 要转化的单位
          viewportWidth: 750, // UI设计稿的宽度
          unitPrecision: 6, // 转换后的精度，即小数点位数
          propList: ['*'], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
          viewportUnit: 'vw', // 指定需要转换成的视窗单位，默认vw
          fontViewportUnit: 'vw', // 指定字体需要转换成的视窗单位，默认vw
          selectorBlackList: ['ignore'], // 指定不转换为视窗单位的类名，
          minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换
          mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false
          replace: true, // 是否转换后直接更换属性值
          exclude: [], // 设置忽略文件，用正则做目录名匹配
          landscape: false, // 是否处理横屏情况
          // 如果没有使用其他的尺寸来设计，下面这个方法可以不需要，比如vant是375的
          customFun: ({ file }) => {
            // 这个自定义的方法是针对处理vant组件下的设计稿为375问题
            const designWidth = path.join(file).includes(path.join('node_modules', 'vant')) ? 375 : 750;
            return designWidth;
          },
        }),
      ],
    },
  },

  // 配置让IP可访问项目 解决Network提示‘use `--host` to expose’
  server: {
    host: '0.0.0.0',
    port: 8109,
    proxy: {
      '/auth': {
        target: targetUrl,
        changeOrigin: true,
        rewrite: (p) => p.replace(/^\/auth/, '/auth'),
      },
      '/system': {
        target: targetUrl,
        changeOrigin: true,
        rewrite: (p) => p.replace(/^\/system/, '/system'),
      },
      '/code': {
        target: targetUrl,
        changeOrigin: true,
        rewrite: (p) => p.replace(/^\/code/, '/code'),
      },
      '/requestApi': {
        target: targetUrl,
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/requestApi/, '/requestApi'),
      },
      '/business': {
        target: targetUrl,
        changeOrigin: true,
        rewrite: (p) => p.replace(/^\/business/, '/business'),
      },
      '/publicService': {
        target: targetUrl,
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/publicService/, '/publicService'),
      },
    },
  },
  // 别名配置
  resolve: {
    alias: {
      '~': path.resolve(__dirname, './'),
      '@': path.resolve(__dirname, 'src'),
    },
    extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue'],
  },
  build: {
    outDir: 'KaiFengH5',
    rollupOptions: {
      output: {
        chunkFileNames: `static/js/[name].[hash]${Timestamp}.js`,
        entryFileNames: `static/js/[name].[hash]${Timestamp}.js`,
        assetFileNames: `static/[ext]/[name].[hash]${Timestamp}.[ext]`,
      },
    },
  },
});