vue-cli2和vue-cli3下的lib-flexible适配（移动端+大屏）

前言

lib-flexible 是淘宝项目组开发的一个插件，用于移动端适配，但 lib-flexible 往往并不独立出现，而是搭配 px2rem-loader 自动将css中的px转换成rem来一起做适配方案。

1. 移动端适配

lib-flexible本身就是用来做移动端适配，故使用很简单，不需要修改什么。至于 px2rem-loader，笔者没有在移动端实践过，故只是在此记录一下使用步骤。

1.1 安装 lib-flexible

npm install lib-flexible --save-dev

1.2 引入 lib-flexible

在入口文件中引入lib-flexible

// main.js
import 'lib-flexible'

1.3 安装 px2rem-loader

npm install px2rem-loader --save-dev

1.4 配置 px2rem-loader

1.4.1 vue-cli 2.x

1、在build/utils.js下的exports.cssLoaders添加

// 增加代码，px转rem配置（需要将px2remloader添加进loaders数组中）
  const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      remUnit: 75,  //以设计稿750为例， 750 / 10
    }
  }

2、修改build/utils.js下generateLoaders中的loaders配置

// 注释掉这一行
// const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
// 修改为
const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader]

3、重新npm run dev

1.4.2 vue-cli 3.x

3.x版本需要自己配置，在项目根目录新建的vue.config.js下，添加如下配置后重新启动

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('css')
      .test(/\.css$/)
      .oneOf('vue')
      .resourceQuery(/\?vue/)
      .use('px2rem')
      .loader('px2rem-loader')
      .options({
        remUnit: 75,
      });
  }
}

2. 大屏适配

此次主要是在大屏适配的实践中遇到的问题。
步骤与移动端适配类似，主要区别如下。
我的屏幕分辨率是1920 x 1080，以此为例，配置px2rem-loader时把remUnit的值修改为192，发现页面布局出现问题。找到./node_modules/lib-flexible/flexible.js查看源码发现下面代码片段：

function refreshRem() {
    let { width } = docEl.getBoundingClientRect();
    if (width / dpr > 540) {
      width = 540 * dpr;
    }
    const rem = width / 10;
    docEl.style.fontSize = `${rem}px`;
    flexible.rem = win.rem = rem;
  }

原来屏幕宽度除以dpr（dpr是一个倍数，此处一般为1）大于540时，就不再进行适配了。修改源码如下：

function refreshRem() {
    let { width } = docEl.getBoundingClientRect();
    if (width / dpr > 540) {
      width *= dpr;
    }
    const rem = width / 10;
    docEl.style.fontSize = `${rem}px`;
    flexible.rem = win.rem = rem;
  }

配置px2rem-loader如下：

vue-cli 2.x

1、在build/utils.js下的exports.cssLoaders添加

// 增加代码，px转rem配置（需要将px2remloader添加进loaders数组中）
  const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      remUnit: 192,  //根据视觉稿，rem为px的十分之一，1920px  192 rem
      remPrecision: 8//换算的rem保留几位小数点
    }
  }

2、修改build/utils.js下generateLoaders中的loaders配置

// 注释掉这一行
// const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
// 修改为
const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader]

3、重新npm run dev

vue-cli 3.x

跟移动端一样，在项目根目录新建的vue.config.js下，添加如下配置，但查看页面后发现并未生效。

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('css')
      .test(/\.css$/)
      .oneOf('vue')
      .resourceQuery(/\?vue/)
      .use('px2rem')
      .loader('px2rem-loader')
      .options({
        remUnit: 192,  //根据视觉稿，rem为px的十分之一，1920px  192 rem
      	remPrecision: 8//换算的rem保留几位小数点
      });
  }
}

目前还未清楚什么原因，因此使用了另一个插件成功实现了适配。步骤如下：
1、安装postcss-px2rem插件

npm install postcss-px2rem --save-dev

2、在vue.config.js中配置如下

module.exports = {
  css: {
    loaderOptions: {   
      postcss: {
        plugins: [
          require('postcss-px2rem')({
            //根据视觉稿，rem为px的十分之一，1920px  192 rem
            remUnit: 192,
            //换算的rem保留几位小数点
            remPrecision: 8,
          }),
        ],
      },
    },
  },
}

重新启动项目就成功啦~

---

补充：重新npm install项目依赖时需要重新修改flexible.js，方便起见个人建议可以把flexible.js复制一份修改之后在main.js引入，这样就不用每个项目成员都修改了。