vue项目移动端适配

一、安装 px2rem-loader
其作用是将px转换成rem
在命令行执行 npm install px2rem-loader
然后在build文件夹里的utils.js里cssLoaders函数添加根元素比例，这里75即是按照ui图750px

const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      remUint: 75
    }
  }
  const cssLoader = {
    loader: 'css-loader',
    options: {
      sourceMap: options.sourceMap
    }
  }

后面还要在generateLoaders函数引入px2remLoader

const loaders = [cssLoader, px2remLoader]

二、安装 lib-flexible
lib-flexible的作用是将px2remLoader中remUint的值赋值为页面的十分之一，从而达到1rem在不同尺寸下都能达到相同的比例。
安装步骤:
1、npm i lib-flexible --save
2、在入口main.js中引用 import ‘lib-flexible/flexible’
3、在index.html中添加mate标签 <meta name="viewport" content="width=device-width, initial-scale=1.0">
当走完以上步骤，基本的移动端vue适配就完成里。当然在过程中可能出现ipad比例不正确的问题，会出现1rem最大值只是54px，这是因为引用的 lib-flexible中限制。
在node_modules中找到flexible.js

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;
  }

上面可以看到最大宽度被限制，虽然不知道插件限制的原因但是只要更改一下就可以解决ipad的适配问题。

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;
  }

如果知道限制原因的小伙伴，还请多多指教。