vue移动端适配，flexible+px2rem-loader

首先装包

npm i lib-flexible --save  
npm i px2rem-loader --save  

装完之后修改一下flexible.js的一个地方（因为依赖中当屏幕宽度大于540后，width固定写死了）

改完之后的代码

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

然后在main.js引入flexible

import 'lib-flexible'

最后修改build下的utils.js文件配置

在cssLoaders函数里添加px2remLoader

（代码方便copy）

// 配置px2rem-loader
const px2remLoader = {
  loader: 'px2rem-loader',
  options: {
    // 根据你的设计稿而定，remUnit = 设计稿 / 10;
    // 比如750px的设计稿，remUnit = 1920 / 10 = 192;
    remUnit: 192
  }
}

然后在generateLoaders里面添加px2remLoader

（同样方便copy）

const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader]

验证一下，写两个div

<template>
  <div>
    <div class="div1"></div>
    <div class="div2"></div>
  </div>
</template>

<script>
export default {

}
</script>

<style>
.div1{
  width: 1920px;
  height: 192px;
  background-color: red;
}
.div2{
  width: 960px;
  height: 192px;
  background-color: blue;
}

</style>

代码里写的是px，但页面上显示已经是rem了

OK，成功！