vue-cli3 uses postcss-plugin-px2rem method

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, // Convert the base, default 100, so as to set the font of the root label to 1rem to 50px, so that you can measure how many pxes from the design draft and write more px directly in the code.           //propWhiteList: [], //The default value is an empty array, which means disabling whitelisting and enabling all properties.           exclude: /node_module/,  //Default false, you can (reg) use regular expressions to exclude certain folders, such as /(node_module)/ .  If you want to convert px in the front-end UI framework to rem, please set this property to the default value           // selectorBlackList: [], // selector to be ignored and retained as px           // ignoreIdentifier: false, //(boolean/string) Method to ignore a single attribute. After enabling ignoreidentifier, replace will be automatically set to true.           // replace: true, // (boolean) replaces the rule containing REM instead of adding a fallback.         }),
       ]
     }
   }
 }

npm i postcss-plugin-px2rem --save

	import px2rem from 'postcss-plugin-px2rem';
	// Plug-in parameter settings	const px2remOptions = {
	  rootValue: 16,  //Convert base, default 100, the size of the root element font	  unitPrecision: 5, //The decimal number that allows REM units to be grown to is actually precision control	  // propWhiteList: [], // Whitelist	  // propBlackList: [], // Blacklist	  exclude:false,  //Default false, methods to exclude certain folders, such as /(node_module)/.	  // selectorBlackList: [], // The selector to be ignored and kept as px.  Can be a string or a regular expression	  // ignoreIdentifier: false, //(boolean/string) A method to ignore a single property. When ignoreIdentifier is enabled, replace will automatically set to true.	  // replace: true, // (boolean) replaces the rule containing rems instead of adding a fallback rule.	  mediaQuery: false, // (Bolean) allows converting px in media queries	  minPixelValue: 0  // Set the minimum pixel value to replace.  Default 0	}
	
	export default defineConfig（{
	  plugins:[...],
	  css:{
		postcss:{
		  plugins:[px2rem(px2remOptions)]
		}
	  }
	}）

	// 
	import _ from 'lodash'
	// Dynamically modify the size of the root element font based on the 1920px base map	export const setDomFontSize = () => {
	    let width =  || ;
	    let fontsize = (width <= 200 ? 1200 : width) / 100 + 'px';
	    (('html')[0].style)['font-size'] = fontsize;
	}
	
	// let setDomFontSizeDebounce = _.debounce(setDomFontSize, 400)
	// ('resize', setDomFontSizeDebounce); // The browser adds shrink monitoring and anti-shake control, and recalculates the rem configuration	('resize', setDomFontSize); 
	// Here is a knowledge point: , the difference between the two methods	// The main difference：onresizeIt's a callback itself，Multiple executions will be overwritten，passaddEventListerListening will not be overwritten if multiple executions are performed，Used to generate multiple cyclesEchartshour，Change the window size，EchartsChart adaptive problem

	// 
	import { setDomFontSize } from './utils/pxToRem'
	// Execution method is equivalent to global mount	setDomFontSize()