npm i postcss-plugin-px2rem --save -dev

"postcss-plugin-px2rem": {
        "rootValue": 37.5,
        "unitPrecision": 5,
        "propBlackList": [
          "font-size"
        ],
        "mediaQuery": false,
        "minPixelValue": 3
      }

css: {
   loaderOptions: {
     postcss: {
       plugins: [
         require('postcss-plugin-px2rem')({
           // rootValue: 100, //換算基數(shù)， 默認(rèn)100  ，這樣的話把根標(biāo)簽的字體規(guī)定為1rem為50px,這樣就可以從設(shè)計稿上量出多少個px直接在代碼中寫多上px了。
           //propWhiteList: [],  //默認(rèn)值是一個空數(shù)組，這意味著禁用白名單并啟用所有屬性。
           exclude: /node_module/,  //默認(rèn)false，可以（reg）利用正則表達(dá)式排除某些文件夾的方法，例如/(node_module)/ 。如果想把前端UI框架內(nèi)的px也轉(zhuǎn)換成rem，請把此屬性設(shè)為默認(rèn)值
           // selectorBlackList: [], //要忽略并保留為px的選擇器
           // ignoreIdentifier: false,  //（boolean/string）忽略單個屬性的方法，啟用ignoreidentifier后，replace將自動設(shè)置為true。
           // replace: true, // （布爾值）替換包含REM的規(guī)則，而不是添加回退。
         }),
       ]
     }
   }
 }

npm i postcss-plugin-px2rem --save

	import px2rem from 'postcss-plugin-px2rem';
	// 插件的參數(shù)設(shè)置
	const px2remOptions = {
	  rootValue: 16,  //換算基數(shù)， 默認(rèn)100 ,根元素字體的大小
	  unitPrecision: 5, //允許REM單位增長到的十進(jìn)制數(shù)字，其實就是精度控制
	  // propWhiteList: [], // 白名單
	  // propBlackList: [], // 黑名單
	  exclude:false,  //默認(rèn)false，排除某些文件夾的方法，例如/(node_module)/ 。
	  // selectorBlackList: [], //要忽略并保留為 px 的選擇器。可以是字符串或者正則表達(dá)式
	  // ignoreIdentifier: false, //（boolean/string）一種忽略單個屬性的方法，當(dāng)啟用 ignoreIdentifier 時，replace將自動設(shè)置為true。
	  // replace: true, // （布爾值）替換包含 rems 的規(guī)則，而不是添加后備規(guī)則。
	  mediaQuery: false, //（布爾值）允許在媒體查詢中轉(zhuǎn)換px
	  minPixelValue: 0  // 設(shè)置要替換的最小像素值。 默認(rèn) 0
	}
	
	export default defineConfig（{
	  plugins:[...],
	  css:{
		postcss:{
		  plugins:[px2rem(px2remOptions)]
		}
	  }
	}）

	// pxToRem.js
	import _ from 'lodash'
	// 以1920px 底圖為準(zhǔn)開發(fā)頁面，動態(tài)修改根元素字體的大小
	export const setDomFontSize = () => {
	    let width = document.documentElement.clientWidth || document.body.clientWidth;
	    let fontsize = (width <= 200 ? 1200 : width) / 100 + 'px';
	    (document.getElementsByTagName('html')[0].style)['font-size'] = fontsize;
	}
	
	// let setDomFontSizeDebounce = _.debounce(setDomFontSize, 400)
	// window.addEventListener('resize', setDomFontSizeDebounce); // 瀏覽器加入收縮監(jiān)聽防抖，重新計算rem配置
	window.addEventListener('resize', setDomFontSize); 
	// 這里有個知識點： window.onresize，window.addEventLister兩種方式的區(qū)別
	// 最主要的區(qū)別：onresize本身就是一個回調(diào)，多次執(zhí)行會被覆蓋，通過addEventLister監(jiān)聽多次執(zhí)行就不會被覆蓋，運用于循環(huán)生成多個Echarts時，改變窗口大小，Echarts圖表自適應(yīng)問題

	// main.js
	import { setDomFontSize } from './utils/pxToRem'
	// 執(zhí)行方法，相當(dāng)于全局掛載了
	setDomFontSize()