VUE PC端适配方案flexible+px2remLoader

利用webpack配置px2rem-loader和lib-flexible来实现px转化rem
1、安装
npm install px2rem-loader -D
npm install lib-flexible -S
2.参照官网配置方法

// 增加代码，px转rem配置（需要将px2remloader添加进loaders数组中）
  const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      remUnit: 192,  //根据视觉稿，rem为px的十分之一，1920px  192 rem
      // remPrecision: 8//换算的rem保留几位小数点
    }
  }

但是，重新启动项目比例不对，需要修改代码。
在main.js中引入文件

import './utils/flexible.js'

查看flexible代码，发现

需要将代码修改为适应PC端的代码。

function refreshRem(){
        var width = docEl.getBoundingClientRect().width;
        if (width / dpr > 540) {
            width = width * dpr;
        }
        var rem = width / 10;
        docEl.style.fontSize = rem + 'px';
        flexible.rem = win.rem = rem;
    }

重启项目，发现一切运行正常。
对了，需要注意的事，一般不对1px的边框进行换算，只需要哎样式后面添加/no/即可保证不被转换

.login 
        width: 1920px;
        height: 200px;
        font-size: 32px;
        border: 1px solid red;/*no*/
        background : $color-buttonSure

希望对大家有帮助~