// vite.config.js
import vue from '@vitejs/plugin-vue2';
import { resolve } from 'path';
import pxtovw from 'postcss-px-to-viewport';

const loder_pxtovw = pxtovw({
  unitToConvert: "px", // 要转化的单位
  viewportWidth: 375, // UI设计稿的宽度
  unitPrecision: 2, // 转换后的精度，即小数点位数
})

export default {
  plugins: [
    vue(),
  ],
  css: {
    postcss: {
      plugins: [loder_pxtovw]
    }
  },
  // ... other Vite config options
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src')
    }
  },
  build: {
    rollupOptions: {
      output: {
        entryFileNames: 'js/[name]-[hash].js',//入口文件
        chunkFileNames: 'js/[name]-[hash].js',//分包引入文件
        //静态文件
        assetFileNames (assetInfo) {
          //文件名称
          if (assetInfo.name.endsWith('.css')) {
            return 'css/[name]-[hash].css'
          }
          //图片名称 定义图片后缀
          const imgExts = ['.png', '.jpg', '.jpeg', '.webp', '.gif', '.svg']
          if (imgExts.some(ext => assetInfo.name.endsWith(ext))) {
            return 'img/[name]-[hash].[ext]'
          }
          //字体图标 定义图标后缀
          const fontsExts = ['.ttf', '.woff', '.woff2', '.eot']
          if (fontsExts.some(ext => assetInfo.name.endsWith(ext))) {
            return 'fonts/[name]-[hash].[ext]'
          }
          //媒体文件 定义媒体后缀
          const mediaExts = ['.mp4', '.mp3', '.webm']
          if (mediaExts.some(ext => assetInfo.name.endsWith(ext))) {
            return 'media/[name]-[hash].[ext]'
          }
          //剩余资源文件
          return 'assets/[name]-[hash].[ext]'
        }
      },
    },
  },
  server: {
    open: true,
    cors: true,
    proxy: {
      // 这里可以根据你的需求修改路径
      '/XYH': {
        target: 'http://xxx.com', // 目标服务器的地址
        changeOrigin: true,// 是否改变请求源
        rewrite: (path) => path.replace(/^\/XYH/, '')//可选：重写路径
      }
    },
  },
}

// main.js
import Vue from 'vue'
import App from './App.vue'
import router from '@/router'
import store from '@/store'
import '@vant/touch-emulator';
import { Button, Icon, Swipe, } from 'vant';
import 'vant/lib/index.css'
import '@/assets/style/global.css'

const components = [
  Button, Icon, Swipe,
]

components.forEach(item => {
  Vue.use(item)
})

Vue.config.productionTip = false


//函数节流
const on = Vue.prototype.$on
Vue.prototype.$on = function (event, func) {
  let previous = 0
  let newFunc = func
  if (event === 'click') {
    newFunc = function () {
      const now = new Date().getTime()
      if (previous + 1500 <= now) {
        func.apply(this, arguments)
        previous = now
      }
    }
  }
  on.call(this, event, newFunc)
}


new Vue({
  render: h => h(App),
  router,
  store,
}).$mount('#app')

// base.js
const proBase = 'https://xxx.com'

const devBase = 'XYH'

const baseURL = process.env.NODE_ENV === 'development' ? devBase : proBase

export {
  baseURL
}