vue rem vw 适配配置

// eslint-disable-next-line no-undef
module.exports = {
  plugins: {
    // 'postcss-pxtorem': {
    //   // 如果是二倍图750px,则rootValue写 75，如果是一倍图375px,则写 37.5
    //   // 这里写设计稿的宽度/10即可，例如设计稿宽度是750px就写75
    //   // vant默认是37.5，如果是使用了vant的话可以像下面这样写
    //   // rootValue(res) {
    //   //   return res.file.indexOf("vant") !== -1 ? 37.5 : 75;
    //   // },
    //   rootValue: 192,
    //   propList: ['*', '!border'], // 需要转换的属性，默认转换所有属性
    //   selectorBlackList: ['.el-'], // CSS选择器黑名单，防止部分选择器被转换
    //   exclude: /\/node_modules\//i, // 忽略包文件转换rem
    //   mediaQuery: false,  //（布尔值）允许在媒体查询中转换px。
    // },
    autoprefixer: {
      overrideBrowserslist: [
        'Android 4.1',
        'IOS 7.1',
        'Chrome > 31',
        'ff > 31',
        'ie >=8',
        'last 10 versions', // 所有主流浏览器最近10版本用
      ],
      grid: true, // 是否为grid布局启用autoprefixer
    },
    'postcss-px-to-viewport-update': {
      unitToConvert: "px", // 要转化的单位
      viewportWidth: 750, // UI设计稿的宽度
      unitPrecision: 6, // 转换后的精度，即小数点位数
      propList: ["*"], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
      viewportUnit: "vw", // 指定需要转换成的视窗单位，默认vw
      fontViewportUnit: "vw", // 指定字体需要转换成的视窗单位，默认vw
      selectorBlackList: ["wrap"], // 指定不转换为视窗单位的类名，
      minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换
      mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false
      replace: true, // 是否转换后直接更换属性值
      exclude: [/node_modules/], // 设置忽略文件，用正则做目录名匹配
      landscape: false, // 是否处理横屏情况
      include: [/\/src\/h5\//, /\/src\/layout\/components\/LayoutH5\//]
    }
  },
}

需要的包：
“autoprefixer”: “^10.4.19”,
“postcss”: “^8.4.38”,
“postcss-px-to-viewport-update”: “^1.2.0”,
“postcss-pxtorem”: “^6.1.0”,