MobilePolice/vite.config.js

// 导入 Vite 的配置函数
import { defineConfig, loadEnv } from 'vite'
// 导入 Vue 插件
import vue from '@vitejs/plugin-vue'
// 导入自动导入插件，用于自动导入 API
import AutoImport from 'unplugin-auto-import/vite'
// 导入组件自动注册插件
import Components from 'unplugin-vue-components/vite'
// 导入 Vant 组件库的解析器
import { VantResolver } from '@vant/auto-import-resolver'
import path from 'node:path'
import postcssPxToViewport from 'postcss-px-to-viewport-8-plugin'

// 导出 Vite 配置
export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd())
  return {
    // 配置环境变量前缀
    envPrefix: 'APP_',
    // 配置插件
    plugins: [
      // 启用 Vue 插件
      vue(),
      // 配置自动导入插件
      AutoImport({
        // 使用 Vant 解析器
        resolvers: [VantResolver()]
      }),
      // 配置组件自动注册插件
      Components({
        // 使用 Vant 解析器
        resolvers: [VantResolver()]
      })
    ],
    css: {
      postcss: {
        plugins: [
          postcssPxToViewport({
            // 要转化的单位
            unitToConvert: 'px',
            // UI设计稿的大小
            viewportWidth: 375,
            // 转换后的精度
            unitPrecision: 6,
            // 转换后的单位
            viewportUnit: 'vw',
            // 字体转换后的单位
            fontViewportUnit: 'vw',
            // 能转换的属性，*表示所有属性，!border表示border不转
            propList: ['*'],
            // 指定不转换为视窗单位的类名，
            selectorBlackList: ['van-'],
            // 最小转换的值，小于等于1不转
            minPixelValue: 1,
            // 是否在媒体查询的css代码中也进行转换，默认false
            mediaQuery: false,
            // 是否转换后直接更换属性值
            replace: true,
            // 忽略某些文件夹下的文件或特定文件，例如 'node_modules' 下的文件
            exclude: [/node_modules/],
            // 包含那些文件或者特定文件
            include: [],
            // 是否处理横屏情况
            landscape: false
          })
        ]
      },
      preprocessorOptions: {
        scss: {
          silenceDeprecations: ['legacy-js-api'],
          additionalData: `@use "@/assets/style/variables.scss";`
        }
      }
    },
    resolve: {
      alias: {
        '@': path.resolve(__dirname, './src')
      }
    },
    server: {
      host: '0.0.0.0',
      proxy: {
        [env.APP_BASE_API]: {
          target: env.APP_BASE_SERVER_URL,
          changeOrigin: true
        }
      }
    }
  }
})