vue-cli 2.x和3.x配置移动端适配px自动转为rem

移动端适配一直都是个大问题，现在也出现了各种各样的解决方案，比如 rem, vw 百分比等，但是比较成熟的切比较容易编写的还是 rem，他是相对于根元素的 font-size 进行等比例计算的。

但是我们在编写css的时候，需要计算每一个元素相对于根元素的rem值是多少。会比较麻烦，并且维护起来也不方便。那么社区也出现了各种解决方案。

早期的解决方案是利用 sass 或者less编写函数进行自动转换。到后来淘宝的lib-flexible，再到现在的 postcss，都是为了编写的时候写的是px，会自动转为 rem。下面我们就来看下vue-cli2.x 和 3.x 如何去配置。

vue-cli2.x

1. 安装依赖

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

2. 在 src/main.js 中引入

import 'lib-flexible';

3. 在 build/utils.js 中加入以下代码

exports.cssLoaders = function (options) {
  // ...
  const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
        remUnit: 75
    }
  }
  // ...
  function generateLoaders (loader, loaderOptions) {
    // 在原来的loader添加上px2remLoader
    const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader]
    // ...
  }
}

4. 如果想要页面的viewport缩放则需要将 index.html 中注释掉原来的设置

<meta name="viewport" content="width=device-width,initial-scale=1.0">
<!-- 
  官方上说是要把这里注释掉
  此处注释掉之后，lib-flexible 会根据不同的屏幕自动添加，比如2倍屏这里就是 0,5
  
  但是，我这用的时候有点坑。。
    如果将此注释掉，在某些需要写 px 的地方，就会出现在不同的屏幕上看到的 大小不一样的问题，因为缩放的比例不同了。比如富文本渲染，就得用px
    解决办法是使用不注释此代码，在任何手机上都是按照1倍进行缩放。。px2remloader会自动计算，不会有问题
　这里看各自项目的需要吧
 -->

vue-cli 3.x

1. 下载依赖

npm install postcss-pxtorem --save-dev // 此处和2.x 不一样的插件
npm install lib-flexible --save

2. 在 src/main.js 中引入

import 'lib-flexible/flexible.js'; // 此处和2.x不一样

3. 在package.json中配置

// 在最后添加此脚本
{
  "postcss": {
    "plugins": {
      "autoprefixer": {},
      "postcss-pxtorem": {
        "rootValue": 75,
        "propList": [
          "*"
        ]
      }
    }
  }
}

4. 如果想要页面的viewport缩放则需要将 public/index.html 中注释掉原来的设置， 通上面的第四步

demo 可参考本人的配置

cli2.x: https://github.com/Shenjieping/app-cli

cli3.x: https://github.com/Shenjieping/app-cli-v3