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

rem: 相对长度单位,相对于根元素(即html元素)font-size计算值的倍数

安装 flexible和 px2rem-loader

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

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

引入lib-flexible

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

import 'lib-flexible'

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

<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
//不要写上这行meta，flexible会为根据屏幕自动给我加上，如果加了，那么flexible会根据你加的值来计算，也就会出现固定的值

配置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=多少像素 这里的设计稿是75px。
  }
}
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;
}

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

注意：对外部引入css，如果遇到px2rem不能转换rem问题，解决方法：在vue-cli生成的文件中，找到文件 build/utils.js，添加配置：

const cssLoader = {
  loader: 'css-loader',
  options: {
    minimize: process.env.NODE_ENV === 'production',
    sourceMap: options.sourceMap,
    importLoaders: 2  //在css-loader前应用的loader数目，默认为0
    //如果不加这个，@import的外部css文件将不能正常转换
    //如果还不行，试着调大数字
    //记住：更改后，必须重启项目，否则不生效！！！
  }
}

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