vue-cli3使用postcss-plugin-px2rem方式

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, //换算基数， 默认100  ，这样的话把根标签的字体规定为1rem为50px,这样就可以从设计稿上量出多少个px直接在代码中写多上px了。
           //propWhiteList: [],  //默认值是一个空数组，这意味着禁用白名单并启用所有属性。
           exclude: /node_module/,  //默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module)/ 。如果想把前端UI框架内的px也转换成rem，请把此属性设为默认值
           // selectorBlackList: [], //要忽略并保留为px的选择器
           // ignoreIdentifier: false,  //（boolean/string）忽略单个属性的方法，启用ignoreidentifier后，replace将自动设置为true。
           // replace: true, // （布尔值）替换包含REM的规则，而不是添加回退。
         }),
       ]
     }
   }
 }

npm i postcss-plugin-px2rem --save

	import px2rem from 'postcss-plugin-px2rem';
	// 插件的参数设置
	const px2remOptions = {
	  rootValue: 16,  //换算基数， 默认100 ,根元素字体的大小
	  unitPrecision: 5, //允许REM单位增长到的十进制数字，其实就是精度控制
	  // propWhiteList: [], // 白名单
	  // propBlackList: [], // 黑名单
	  exclude:false,  //默认false，排除某些文件夹的方法，例如/(node_module)/ 。
	  // selectorBlackList: [], //要忽略并保留为 px 的选择器。可以是字符串或者正则表达式
	  // ignoreIdentifier: false, //（boolean/string）一种忽略单个属性的方法，当启用 ignoreIdentifier 时，replace将自动设置为true。
	  // replace: true, // （布尔值）替换包含 rems 的规则，而不是添加后备规则。
	  mediaQuery: false, //（布尔值）允许在媒体查询中转换px
	  minPixelValue: 0  // 设置要替换的最小像素值。 默认 0
	}
	
	export default defineConfig（{
	  plugins:[...],
	  css:{
		postcss:{
		  plugins:[px2rem(px2remOptions)]
		}
	  }
	}）

	// pxToRem.js
	import _ from 'lodash'
	// 以1920px 底图为准开发页面，动态修改根元素字体的大小
	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); // 浏览器加入收缩监听防抖，重新计算rem配置
	window.addEventListener('resize', setDomFontSize); 
	// 这里有个知识点： window.onresize，window.addEventLister两种方式的区别
	// 最主要的区别：onresize本身就是一个回调，多次执行会被覆盖，通过addEventLister监听多次执行就不会被覆盖，运用于循环生成多个Echarts时，改变窗口大小，Echarts图表自适应问题

	// main.js
	import { setDomFontSize } from './utils/pxToRem'
	// 执行方法，相当于全局挂载了
	setDomFontSize()