Vue-cli3.X使用px2 rem遇到的问题及解决方法

把项目脚手架升级为cli3.x了以后，模板简洁了很多，运行起来也更加快速。但是也随之而来是某些兼容问题。比如我们要在项目钟使用px2rem来计算设计稿的时候，我们不能像以前老的脚手架那样操作了。那我们应该来如何设置呢？

首先，我们应该用npm来安装postcss-px2rem

npm i postcss-plugin-px2rem  --save -dev

然后我们需要在vue.config.js中创建一个配置。由于在vue-cli3.x中。去掉了build和config文件夹。所有的配置都放到了vue.config.js，然而这个文件脚手架并没有生成，所以需要手动在项目的根目录创建一个文件

在vue.config.js里配置

module.exports = {
  lintonsave: true,
  css: {
    loaderoptions: {
      postcss: {
        plugins: [
          require('postcss-plugin-px2rem')({
            rootvalue:75,      // 新版本的是这个值
            mediaquery: false, //（布尔值）允许在媒体查询中转换px。
            minpixelvalue: 3 //设置要替换的最小像素值(3px会被转rem)。 默认 0
          }),
        ]
      }
    }
  },
}

这里需要说明一点。网上搜的一堆教程都强调应该增加remunit来设置rem的计算标准。但是其实在新版后，这个值换成了rootvalue这个。例如你设计稿为750的宽度标准，那么这里的值设置为75则可。

接下来还有一个工作。由于rem是根据根字体的大小来作为基准值的，然而我们的移动设备屏幕大小以及有些屏幕为视网膜屏的，会是普通屏幕的2倍，所以这个基准值我们需要根据不同设备来进行计算。这里我们在src/plugins下新建一个rem.js文件（代码如下）。

(function (win, lib) {
  var doc = win.document;
  var docel = doc.documentelement;
  var metael = doc.queryselector('meta[name="viewport"]');
  var flexibleel = doc.queryselector('meta[name="flexible"]');
  var dpr = 0;
  var scale = 0;
  var tid;
  var flexible = lib.flexible || (lib.flexible = {});
  if (metael) {
    //console.warn('将根据已有的meta标签来设置缩放比例');
    var match = metael.getattribute('content').match(/initial\-scale=([\d\.]+)/);
    if (match) {
      scale = parsefloat(match[1]);
      dpr = parseint(1 / scale);
    }
  } else if (flexibleel) {
    var content = flexibleel.getattribute('content');
    if (content) {
      var initialdpr = content.match(/initial\-dpr=([\d\.]+)/);
      var maximumdpr = content.match(/maximum\-dpr=([\d\.]+)/);
      if (initialdpr) {
        dpr = parsefloat(initialdpr[1]);
        scale = parsefloat((1 / dpr).tofixed(2));
      }
      if (maximumdpr) {
        dpr = parsefloat(maximumdpr[1]);
        scale = parsefloat((1 / dpr).tofixed(2));
      }
    }
  }
  if (!dpr && !scale) {
    var isandroid = win.navigator.appversion.match(/android/gi);
    var isiphone = win.navigator.appversion.match(/iphone/gi);
    var devicepixelratio = win.devicepixelratio;
    if (isiphone) {
      // ios下，对于2和3的屏，用2倍的方案，其余的用1倍方案
      if (devicepixelratio >= 3 && (!dpr || dpr >= 3)) {
        dpr = 3;
      } else if (devicepixelratio >= 2 && (!dpr || dpr >= 2)) {
        dpr = 2;
      } else {
        dpr = 1;
      }
    } else {
      // 其他设备下，仍旧使用1倍的方案
      dpr = 1;
    }
    scale = 1 / dpr;
  }
  docel.setattribute('data-dpr', dpr);
  if (!metael) {
    metael = doc.createelement('meta');
    metael.setattribute('name', 'viewport');
    metael.setattribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
    if (docel.firstelementchild) {
      docel.firstelementchild.appendchild(metael);
    } else {
      var wrap = doc.createelement('div');
      wrap.appendchild(metael);
      doc.write(wrap.innerhtml);
    }
  }
  function refreshrem() {
    var width = docel.getboundingclientrect().width;
    if (width / dpr > 540) {
      width = 540 * dpr;
    }
    var rem = width / 10;
    docel.style.fontsize = rem + 'px';
    flexible.rem = win.rem = rem;
  }
  win.addeventlistener('resize', function () {
    cleartimeout(tid);
    tid = settimeout(refreshrem, 300);
  }, false);
  win.addeventlistener('pageshow', function (e) {
    if (e.persisted) {
      cleartimeout(tid);
      tid = settimeout(refreshrem, 300);
    }
  }, false);
  if (doc.readystate === 'complete') {
    doc.body.style.fontsize = 12 * dpr + 'px';
  } else {
    doc.addeventlistener('domcontentloaded', function (e) {
      doc.body.style.fontsize = 12 * dpr + 'px';
    }, false);
  }
  refreshrem();
  flexible.dpr = win.dpr = dpr;
  flexible.refreshrem = refreshrem;
  flexible.rem2px = function (d) {
    var val = parsefloat(d) * this.rem;
    if (typeof d === 'string' && d.match(/rem$/)) {
      val += 'px';
    }
    return val;
  }
  flexible.px2rem = function (d) {
    var val = parsefloat(d) / this.rem;
    if (typeof d === 'string' && d.match(/px$/)) {
      val += 'rem';
    }
    return val;
  }
})(window, window['lib'] || (window['lib'] = {}));

然后在main.js里面引入该文件

import './plugins/rem.js'

这样，我们的工作就完成了。可以直接在css里面写px的绝对值。

总结

以上所述是小编给大家介绍的vue-cli3.x使用px2 rem遇到的问题及解决方法,希望对大家有所帮助