vite 打包postcss-pxtorem 使用exclude 发现部分页面不生成rem布局

问题：vite 打包postcss-pxtorem 使用exclude 发现部分页面不生成rem布局

发现原因：经过傻瓜式删除部分代码进行定位，发现问题所在，使用背景图片导致了rem不生成

首先 配置postcss.config.js

let pageList = [
  /src(\\|\/)views(\\|\/)pages(\\|\/)sys-data-center(\\|\/)top-link/,
  // /src(\\|\/)views(\\|\/)pages(\\|\/)sys-data-center(\\|\/)top-link(\\|\/)components/,
  /src(\\|\/)views(\\|\/)pages(\\|\/)sys-data-center(\\|\/)find-data-census(\\|\/)p-find-data-refraction/,
  /src(\\|\/)views(\\|\/)pages(\\|\/)sys-data-center(\\|\/)find-data-census(\\|\/)p-find-data-vision/,
  /src(\\|\/)views(\\|\/)pages(\\|\/)sys-data-center(\\|\/)find-data-census(\\|\/)components-rem/,
  /src(\\|\/)views(\\|\/)pages(\\|\/)sys-data-center(\\|\/)find-Screening-items/
module.exports = {
  'plugins': {
    // to edit target browsers: use "browserslist" field in package.json
    // 'autoprefixer': {},
    // 配置这一段
    'postcss-pxtorem': {
      'rootValue': 192,
      'propList': ['*'],
      exclude: (e) => {
        let list = pageList.filter((item, index) => {
          const itemReg = new RegExp(item)
          if (itemReg.test(e)) {
            return item
          }
        })
        if (list.length > 0) {
          return false
        }
      }
    }

解决办法：

1. 使用img标签进行替换 不使用背景图片 对其我们进行相对定位

  <div class="container-img">
    <img src="@/assets/visualization/city/body.png" alt="" />
  </div>

2.使用vue3中css中v-bind() 方法动态绑定背景图

   setup() {
     const getSrc = (name: any) => {
      if (typeof name === "undefined") return "error.png";
      const path = `/src/assets/map/${name}.png`;
      const modules = import.meta.globEager("/src/assets/map/*");
      return modules[path]?.default;
     };
     const state = reactive({
      bg1: "url(" + getSrc("bg_list") + ")"
     )}
      return {
      ...toRefs(state)
      }
   }
   //css 部分
    background: v-bind("bg1") no-repeat;
 

个人猜测原因：打包后由于加载css时 图片过大阻塞了px转化rem ，将其放入js中用变量处理，是因为css先加载在js之前 加载css可以整体去加载 不用加载图片

具体原因有大佬可以分析一下不 或者有什么打包优化处理 可以解决这个问题的

谢谢