先看下flexiable.js的原理
flexible.js动态配置根元素字体大小原理实现 - 简书 (jianshu.com)

一、安装插件postcss-pxtorem

指定一下版本号，高版本有问题

npm i postcss-pxtorem@5.1.1 --save

二、flexible.js设置html元素字体大小

src--lib--flexible.js

flexible.js

// 首先是一个立即执行函数，执行时传入的参数是window和document
(function flexible(window, document) {
  var docEl = document.documentElement; // 返回文档的root元素
  var dpr = window.devicePixelRatio || 1; // 获取设备的dpr，即当前设置下物理像素与虚拟像素的比值

  // adjust body font size 设置默认字体大小，默认的字体大小继承自body
  function setBodyFontSize() {
    if (document.body) {
      document.body.style.fontSize = 12 * dpr + "px";
    } else {
      document.addEventListener("DOMContentLoaded", setBodyFontSize);
    }
  }
  setBodyFontSize();

  // set 1rem = viewWidth / 10
  function setRemUnit() {
    var rem = docEl.clientWidth / 10;
    docEl.style.fontSize = rem + "px";
  }

  setRemUnit();

  // reset rem unit on page resize
  window.addEventListener("resize", setRemUnit);
  window.addEventListener("pageshow", function (e) {
    if (e.persisted) {
      setRemUnit();
    }
  });

  // detect 0.5px supports  检测是否支持0.5像素，解决1px在高清屏多像素问题，需要css的配合。
  if (dpr >= 2) {
    var fakeBody = document.createElement("body");
    var testElement = document.createElement("div");
    testElement.style.border = ".5px solid transparent";
    fakeBody.appendChild(testElement);
    docEl.appendChild(fakeBody);
    if (testElement.offsetHeight === 1) {
      docEl.classList.add("hairlines");
    }
    docEl.removeChild(fakeBody);
  }
})(window, document);

2.2、main.js引入flexiable.js

// 动态设置根元素html字体大小
import "./lib/flexible";

三、vue.config.js配置pxtorem插件

module.exports = defineConfig({
  css: {
    loaderOptions: {
      postcss: {
        postcssOptions: {
          // 在plugins外面加一层postcssOptions
          plugins: [
            require("postcss-pxtorem")({
              rootValue: 192, // 设计稿的宽度1920的1/10--和flexiable.js将屏幕宽度分10份
              unitPrecision: 5, // 允许rem单位增长到的10进制数字，小数点后的保留位
              propList: ["*"],
              exclude: /node_modules\/[^element-ui]/, // 忽略的目录（正则匹配转换element-ui的样式）
              selectorBlackList: [".retain"], // 要忽略并保留为px的选择器
              mediaQuery: true, // 允许媒体查询转换px
              minPixelValue: 1, // 替换的最小像素值
            }),
          ],
        },
      },
    },
  },
});