vue-cli 2.0中rem方案适配不同屏幕

1、安装lib-flexible和px2rem。lib-flexible是自适应屏幕，px2rem将px转换成rem

npm i lib-flexible -S
npm i px2rem-loader -D

2、在main.js引入

import 'lib-flexible'

3、更改\build\utils.js文件：
增加 px2remLoader：

const cssLoader = {
    loader: 'css-loader',
    options: {
      sourceMap: options.sourceMap
    }
  }

  const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      remUnit: 192 //emUnit 选项意思是 1rem=多少像素，结合 lib-flexible 的方案，我们将 px2remLoader 的 options.remUnit 设置成设计稿宽度的 1/10，这里我们假设设计稿宽为 1920px。
    }
  }

在loaders数组中引入px2remLoader：

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

4、重启服务，执行npm run dev
5、以上修改后，会发现页面根1rem=54px，导致页面字体非常小：

经过排查发现，是插件问题，两种方式修改，推荐第一种：
1、直接修改flexible.js文件，修改内容参见3，放在static文件夹下，在main.js中引入即可。这样做的好处，就是插件问题，多人协同开发时，不需要单独处理。

2、直接在插件依赖中修改：
在node_modules中搜索flexible.js文件，打开该文件
3、在文件中有这个方法，会强制将大于540的屏幕按照540执行:

可以修改为如下，将宽度大于540时候按照实际宽度进行计算即可，问题解决。

遗留：
此方案会影响浏览器放大缩小