VUE项目中px转rem

借鉴了网上的方法，自己在这里整理下。借鉴链接→传送门

一、安装 lib-flexible

npm install lib-flexible --save

二、安装px2rem-loader

npm install px2rem-loader --save-dev

三、安装postcss-pxtorem

（这里做了个人的修改，因为发现按照上面的安装最后报错：PostCSS plugin postcss-pxtorem requires PostCSS 8）

npm install postcss-pxtorem@5.1.1 -D

四、在main.js文件引入lib-flexible

import 'lib-flexible/flexible'

五、在根目录新建一个文件 postcss.config.js；里面写入

const pxtorem = require("postcss-pxtorem");
module.exports = {
  plugins: [
    pxtorem({
      rootValue: 192,//我这里配置的是我1366分辨率下的基准值，会在下面解释
      unitPrecision: 5,
      propList: ["*"],
      selectorBlackList: [/^\.nop2r/, /^\.am/,'html'],
      //排除antd样式，由于我给html设置了min-width，所以把html也排除在外不做rem转换
      replace: true,
      mediaQuery: false,
      minPixelValue: 0
    })
  ]
}

六、更改这个文件夹下的flexible.js文件，将540换成width，然后就结束了