vue-cli3下配置px转rem，并对引入的ui框架px单位转换

1.安装lib-flexible并引入

npm i lib-flexible --save

在入口文件main.js内引入

import "lib-flexible";

或者参考我的上篇文章：Vue中使用REM布局

2.安装postcss-pxtorem

npm install postcss-pxtorem -D

在项目的根目录 .postcssrc.js 文件中进行配置

module.exports = {
  plugins: {
    'autoprefixer': {
      browsers: ['Android >= 4.0', 'iOS >= 7']
    },
    'postcss-pxtorem': {
      rootValue: 37.5,//结果为：设计稿元素尺寸/37.5，比如元素宽375px,最终页面会换算成 10rem
      propList: ['*']
    }
  }
}

此时命令行会有报红

原因是版本高了，引用有修改
修改为以下配置，警告消失

module.exports = {
  plugins: {
    'autoprefixer': {
        overrideBrowserslist: [
          "Android 4.1",
          "iOS 7.1",
          "Chrome > 31",
          "ff > 31",
          "ie >= 8"
        ]
     },
    'postcss-pxtorem': {
      rootValue: 37.5,//结果为：设计稿元素尺寸/37.5，比如元素宽375px,最终页面会换算成 10rem
      propList: ['*']
    }
  }
}

3.vant类ui框架

vant类ui框架是以设计稿375px为基准，而我们日常设计稿为750px
根据文件名来进行不同的rootValue设置

.postcssrc.js 文件修改

module.exports = ({
  file
}) => {
  let isVant = file && file.dirname && file.dirname.indexOf("vant") > -1;
  if(isVant){// 判断条件  如有多种情况，进行不同判断
    rootValue = 37.5
  }else{
    rootValue = 75
  }
  return {
    plugins: {
      'autoprefixer': {
        overrideBrowserslist: [
          "Android 4.1",
          "iOS 7.1",
          "Chrome > 31",
          "ff > 31",
          "ie >= 8"
        ]
      },
      'postcss-pxtorem': {
        rootValue: rootValue,
        propList: ['*']
      }
    }
  }
}

4.效果

h1 {
  width: 750px;
  height: 100px;
  font-size: 24px;
  background: red;
  color: #fff;
}

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200702183739522.png