vue使用rem适配（亲测有效）

1.使用插件

当前插件版本：postcss^8.3.6 postcss-pxtorem^5.1.1

 npm i postcss postcss-pxtorem -D

2. 在vue.config.js中配置

 css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require("postcss-pxtorem")({
            // 换算基数，
            rootValue: 16,
            //允许REM单位增长到的十进制数字,小数点后保留的位数
            unitPrecision: 5,
            propList: ["*"],
            //默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module)/ 。如果想把前端UI框架内的px也转换成rem，请把此属性设为默认值
            exclude: /(node_module)/,
            //（布尔值）允许在媒体查询中转换px。
            mediaQuery: false,
            //要忽略并保留为px的选择器，本项目我是用的vant ui框架，所以忽略他
            selectorBlackList: [".van"],
            //设置要替换的最小像素值
            minPixelValue: 1,
          }),
        ],
      },
    },
  },

3. 新建rem文件

const baseSize = 16;
// 设置 rem 函数
function setRem() {
  // 当前页面宽度相对于 750 宽的缩放比例，可根据自己需要修改。
  const scale = document.documentElement.clientWidth / 375;
  // 设置页面根节点字体大小
  document.documentElement.style.fontSize =
    baseSize * Math.min(scale, 2) + "px";
}
// 初始化
setRem();
// 改变窗口大小时重新设置 rem
window.onresize = function () {
  setRem();
};

4.在main中引入

import "./utils/rem";

5.结果