vite vue3的H5项目自适应屏幕适配完美实践

项目介绍 vite+vue3+js 的项目，vue2 应该也是能用的，自己试下

1. 安装自适应插件 postcss-px-to-viewport

npm install postcss-px-to-viewport -D

2. 我的 UI 设计稿宽度是 375，所以 viewportWidth 设置为 375，会自动转换为 vw，
如果引入了 UI 组件，会强制的把组件的 px 给改掉，selectorBlackList: [‘van-’] 属性可以指定不转换为视窗单位的类名，例如 vantUI 组件所有类名都是以 van- 开头的，就不会将组件的宽度改变啦。

import {
  defineConfig
} from 'vite'
import vue from '@vitejs/plugin-vue'
import postcsspxtoviewport from 'postcss-px-to-viewport'


export default defineConfig({
  plugins: [vue()], 
  css: {
    postcss: {
      plugins: [
        postcsspxtoviewport({
          unitToConvert: 'px', 
          viewportWidth: 375, 
          unitPrecision: 6, 
          propList: ['*'], 
          viewportUnit: 'vw', 
          fontViewportUnit: 'vw', 
          selectorBlackList: ['van-'], 
          minPixelValue: 1, 
          mediaQuery: true, 
          replace: true, 
          
          exclude: [],
          landscape: false 
        })
      ]
    }
  }
})