lingxixue-web/vite.config.ts

import { defineConfig } from 'vite'
import path from 'path'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver, VantResolver } from 'unplugin-vue-components/resolvers'
// Define a custom PostCSS plugin using the modern API
const pxToViewport = (options = {}) => {
  const defaultOptions = {
    unitToConvert: 'px',
    viewportWidth: 1920,
    viewportHeight: 1200,
    unitPrecision: 2,
    propList: ['*'],
    viewportUnit: 'vw',
    fontViewportUnit: 'vw',
    selectorBlackList: ['.px-w'],
    minPixelValue: 1,
    mediaQuery: true,
    replace: true,
    landscape: false,
    landscapeUnit: 'vw',
    landscapeWidth: 1920,
  }

  const opts = { ...defaultOptions, ...options }

  return {
    postcssPlugin: 'postcss-px-to-viewport',
    Declaration(decl: { value: string }) {
      if (!decl.value.includes('px')) return

      const pxRegex = /(\d*\.?\d+)px/g
      decl.value = decl.value.replace(pxRegex, (match, group) => {
        const pixels = parseFloat(group)
        if (pixels <= opts.minPixelValue) return match

        const vw = ((pixels / opts.viewportWidth) * 100).toFixed(opts.unitPrecision)
        return `${vw}${opts.viewportUnit}`
      })
    },
  }
}
pxToViewport.postcss = true

const dir = (url: string): string => path.resolve(__dirname, url)
// const vh_props = [
//   'height',
//   'min-height',
//   'max-height',
//   'line-height',
//   'top',
//   'margin-top',
//   'padding-top',
//   'bottom',
//   'margin-bottom',
//   'padding-bottom',
//   'row-gap',
// ]

// const vw_props = ['*']
// for (const p of vh_props) {
//   vw_props.push(`!${p}`)
// }

export default defineConfig({
  resolve: {
    alias: {
      '@': dir('src'),
      '@c': dir('src/components'),
      '@p': dir('src/plugins'),
    },
  },
  plugins: [
    vue(),
    vueJsx(),
    AutoImport({
      imports: ['vue', 'vue-router', 'pinia'],
      resolvers: [ElementPlusResolver(), VantResolver()],
      eslintrc: {
        enabled: true,
        filepath: '.auto-import.json',
        globalsPropValue: true,
      },
      dirs: ['src/stores'],
      dts: dir('.auto-import.d.ts'),
    }),
    Components({
      dirs: ['src/components'],
      extensions: ['vue', 'tsx'],
      resolvers: [ElementPlusResolver(), VantResolver()],
      dts: dir('.components.d.ts'),
    }),
    // lazyImport({
    //   resolvers: [
    //     VxeResolver({
    //       libraryName: 'vxe-table',
    //     }),
    //     VxeResolver({
    //       libraryName: 'vxe-pc-ui',
    //     }),
    //   ],
    // }),
  ],
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `
                    @use "@/styles/variate.scss" as *;
                `,
        // 使用现代API并静默弃用警告
        api: 'modern',
        silenceDeprecations: ['legacy-js-api'],
      },
    },
    postcss: {
      plugins: [
        pxToViewport({
          viewportWidth: 1920,
          viewportHeight: 1200,
          unitPrecision: 2, // 单位转换后保留的精度
          selectorBlackList: ['.px-w'], // 需要忽略的CSS选择器，不会转为视口单位，使用原有的px等单位。
        }),
        // PostCssPxToViewport8plugin({
        //   unitToConvert: 'px',
        //   viewportWidth: 1200,
        //   viewportHeight: 1200,
        //   unitPrecision: 2, // 单位转换后保留的精度
        //   propList: vh_props, // 能转化为vw的属性列表
        //   viewportUnit: 'vh', // 希望使用的视口单位
        //   selectorBlackList: ['.px-h'], // 需要忽略的CSS选择器，不会转为视口单位，使用原有的px等单位。
        //   minPixelValue: 1, // 设置最小的转换数值，如果为1的话，只有大于1的值会被转换
        //   mediaQuery: true, // 媒体查询里的单位是否需要转换单位
        //   replace: true, //  是否直接更换属性值，而不添加备用属性
        //   exclude: [/node_modules/], // 忽略某些文件夹下的文件或特定文件，例如 'node_modules' 下的文件
        //   include: [], // 如果设置了include，那将只有匹配到的文件才会被转换
        //   landscape: false, // 是否添加根据 landscapeWidth 生成的媒体查询条件 @media (orientation: landscape)
        //   landscapeUnit: 'vh', // 横屏时使用的单位
        //   landscapeWidth: 1200, // 横屏时使用的视口宽度
        // }),
      ],
    },
  },
  server: {
    port: 80,
    host: '0.0.0.0',
    open: true,
    proxy: {
      '/api/campus': {
        // target: 'http://43.136.52.196:9053',
        // target: 'http://test.web.xuexiaole.com',
        target: 'https://ai.lingxixue.com',
        changeOrigin: true,
        rewrite: path => path.replace('/api/campus', '/'),
      },
      '/api': {
        // target: 'http://43.136.52.196:9053',
        // target: 'http://test.web.xuexiaole.com',
        target: 'https://ai.lingxixue.com',
        changeOrigin: true,
      },
    },
  },
  // build: {
  //   rollupOptions: {
  //     output: {
  //       format: 'amd',
  //       manualChunks(id) {
  //         if (id.includes('node_modules')) {
  //           return 'vendor'
  //         }
  //       },
  //     },
  //   },
  // },
})