vue-cli 项目配置 lib-flexible【阿里手淘移动端自适应解决方案】

1、安装 flexible和 px2rem-loader（命令行安装）

px2rem-loader（自动将px转换为remm)

npm install lib-flexible --save
npm install px2rem-loader --save
           

2、引入lib-flexible

在项目入口文件main.js 中引入lib-flexible

import 'lib-flexible'
           

3、去掉目标文件的index.html头里的meta标签。

<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
//不要写上边这行meta，flexible会为根据屏幕自动给我加上，如果你自己加了，
那么flexible会根据你加的值来计算，也就会出现固定的值，安卓和苹果都会一样了。data-dpr有可能是固定的了
           

4、配置px2rem-loade

在bulid文件下的utils.js文件下

const cssLoader = {
    loader: 'css-loader',
    options: {
      minimize: process.env.NODE_ENV === 'production',
      sourceMap: options.sourceMap
    }
  }
  //需要加入此段代码
  const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      remUnit: 75  //1rem=多少像素 这里的设计稿是750px。(会有问题，请继续往下看)
    }
  }
  //在下面两个数组中分别加入 px2remLoader
 function generateLoaders (loader, loaderOptions) {
    const loaders = options.usePostCSS ? [cssLoader, px2remLoader] : [cssLoader]
   ...
  }
]
           

注：发现一个问题

当我尝试去使用we-vue，引入了swiper后发现并不完全像自己想象的那样，样式有些变形。这是因为上述设置把UI框架中的尺寸也强行转化为了rem。后来参考了一些文档找到了两种解决办法：

1、 将上述px2remLoader中的 remUnit: 75 设置为remUnit: 37.5

因为第三方库基本都是按照1倍的样式写，所以这里就用1倍，不能用75(因为UI设计图按手机屏幕尺寸
两倍进行设计的). 这样子我们写页面的时候px/2就可以解决问题了，而不是按照设计稿的尺寸来， 
除以二即可
           

2、同上将 px2remLoader 中的 remUnit: 75 设置为 remUnit: 37.5

将自己的页面尺寸直接使用设计师标注的尺寸(px/75+rem)为单位，这样就没有问题了，大家可以试试.
补充一句：这里我们可以在我们的编辑器中下载相关的less插件进行自动的转换，不需要我们自己去计算
尺寸，很方便。我平时用的就是Hbuilder，在代码助手中设置好比例之后敲回车，编辑器能自动帮我
转换，很方便。
           

以上就是全部总结，很简洁，如果哪位朋友遇到问题可以在下面留言哦。