适配32英寸电容触摸屏

实际开发中，除了移动手机端，还会遇到电容触摸屏，比如用来做证照打印、广告投放使用。
而此种屏幕分辨率一般为1920*1080，但是可视区屏幕尺寸明显大于手机端，此时为了与设计稿保持一致，需要适配屏幕尺寸。
postcss-px-to-viewport 就是解决这个问题的好方案。

首先安装插件

npm install postcss-px-to-viewport --save

然后，在vite.config.js中进行配置

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

import { loadEnv, defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'
import postcssPxToViewport from 'postcss-px-to-viewport'

// https://vite.dev/config/
export default defineConfig(({ mode, command }) => {
  const env = loadEnv(mode, process.cwd());
  return {
    plugins: [
      vue(),
      vueDevTools(),
    ],
    css: {
        postcss: {
          plugins: [
            postcssPxToViewport({
              unitToConvert: 'px', // 要转换的单位
              viewportWidth: 375, // 设计稿宽度
              unitPrecision: 5, // 单位转换精度
              propList: ['*'], // 指定转换那些属性，*表示全部
              viewportUnit: 'vw', // 希望使用的视口单位
              fontViewportUnit: 'vw', // 字体使用的视口单位
              selectorBlackList: [], // 要忽略的选择器
              minPixelValue: 1, // 最小的转换数值
              mediaQuery: false, // 是否在媒体查询中也转换px
              replace: true, // 是否直接更换属性值
              exclude: [], // 要忽略的文件
              include: [], // 要包含的文件
            }),
          ],
        }
      },
    resolve: {
      alias: {
        '@': fileURLToPath(new URL('./src', import.meta.url))
      },
    },
    base: env.VITE_APP_CONTEXT_PATH,
    server: {
      port: 8000,
      open: true,
      hot: true,
      proxy: {
        '/zhengzhao-admin': {
        	target: env.VITE_APP_BASE_API,
        	ws: false,
        	changeOrigin: true
        }
      }
    }
  }
})