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