vue-cli3中pc端使用postcss-pxtorem转px为rem

1.安装postcss-pxtorem

npm i postcss-pxtorem -S

postcss-pxtorem安装高版本会报错的话就按钮指定版本

npm i postcss-pxtorem@5.1.1 -S

2.在vue.config.js里面配置postcss-pxtorem

css: {
    loaderOptions: {
        postcss: {
          postcssOptions:{
            plugins: [
              require('postcss-pxtorem')({
                rootValue: 37.5,// 设计稿宽度或者目前正常分辨率的1/10
                unitPrecision: 3,
                selectorBlackList: [".ivu"],// 要忽略的选择器并保留为px。
                minPixelValue: 2,// 设置要替换的最小像素值。
                "propList": ["*"]，
                replace: true,
                mediaQuery: false,
                minPixelValue: 0
              })
            ]
          }
       }
    }
 },

3.创建rem.js文件

// 基准大小
const baseSize = 37.5
// 设置 rem 函数
function setRem() {
  // 当前页面宽度相对于 750 宽的缩放比例，可根据自己需要修改。
  const scale = document.documentElement.clientWidth / 750
  // 设置页面根节点字体大小
  document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.onresize = function () {
  setRem()
}

在main.js文件内引入rem.js

import '@/utils/rem.js'