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

废话不多说直接上步骤：

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

px2rem-loader（自动将px转换为rem）

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。
    }
  }
 function generateLoaders (loader, loaderOptions) {
    const loaders = options.usePostCSS ? [cssLoader, px2remLoader] : [cssLoader]
   ...
  }

OK，到此结束。配置就这么简单，但是用起来可能有点小问题，看下文...
px2rem 用法：
安装px2rem后，再使用px上有些不同，大家可以参考px2rem官方介绍，下面简单介绍一下。

直接写px，编译后会直接转化成rem ---- 除开下面两种情况，其他长度用这个
在px后面添加/*no*/，不会转化px，会原样输出。 --- 一般border需用这个
在px后面添加/*px*/,会根据dpr的不同，生成三套代码。---- 一般字体需用这个

示例代码
编译前（自己写的代码）

.selector {
    width: 150px;
    height: 64px; /*px*/
    font-size: 28px; /*px*/
    border: 1px solid #ddd; /*no*/
}
安卓的data-dpr=1,iphone6,iphone5默认dpr为2，6plus，iphone7,8,x均为3

编译后（打包后的代码）

.selector {
    width: 2rem;
    border: 1px solid #ddd;
}
[data-dpr="1"] .selector {
    height: 32px;
    font-size: 14px;
}
[data-dpr="2"] .selector {
    height: 64px;
    font-size: 28px;
}
[data-dpr="3"] .selector {
    height: 96px;
    font-size: 42px;
}

实例效果：

安卓手机效果图.png

苹果手机效果图.png

注意：坑1、

不能在index.html的头部加 name 为 viewport 的 meta 标签，flexible会自动为我们添加！

注意：坑2、对外部引入css，px2rem能不能转换rem问题

本项目没有遇到，但是网络上有人反映，如果出现，可以试试别人的方法，如下
在vue-cli生成的文件中,找到以下文件 build/utils.js,如下图添加配置：

px2rem能不能转换rem问题.jpg

当然了，如果你得项目能够正常转换，那就没必要这样设置了。（当你的项目不能转换时候，试试此方法，本人没有试过）

注意：坑3、想一想，如果我们如果引入了第三方框架，他们的样式是另一套写法，样式会被flexible转换，就会破坏框架的样式，这个怎么解决呢？

如下：
比如我有个项目引入了mint-ui框架，也引入了他们的样式，但是在页面了会被转换

555.png

我们可以看到，实际效果图里我们已经把他们的样式强制装换成了rem，效果也不是我们想要的了（比默认的小了很多）
这个问题我也在找答案，如果你有好的办法可以@我，或者留言。
总结：如果是自己开发项目的话，不引入第三方的样式ui库，flexible的确方便的多，设置好后直接安照设计稿的原始像素大小写页面。

最后编辑于：2018.01.17 16:20:25