Vue使用lib-flexible，將px轉化為rem

1.下載lib-flexible

cnpm i lib-flexible --save

2.引入lib-flexible

在main.js中引入lib-flexible

import 'lib-flexible/flexible'

3.安裝px2rem-loader

cnpm install px2rem-loader

4.配置px2rem-loader

在build檔案中找到util.js，將px2rem-loader新增到cssLoaders中，將下面程式碼加進cssLoaders方法中

constpx2remLoader = {

    loader: 'px2rem-loader',

    options: {

      remUint: 75    }

  }

同時，在generateLoaders方法中新增px2remLoader

  function generateLoaders (loader, loaderOptions) {

    constloaders = [cssLoader, px2remLoader]

    if (options.usePostCSS) {

      loaders.push(postcssLoader)

    }

    if (loader) {

      loaders.push({

        loader: loader +'-loader',

        options: Object.assign({}, loaderOptions, {

          sourceMap: options.sourceMap

        })

      })

    }

5、重啟

當配置完之後，重啟下服務，px會自動轉化為rem了

npm run dev

6、注意事項

1、不能在index.html的頭部加 name 為 viewport 的 meta 標籤，flexible會自動為我們新增！

2、對css中文字樣式增加/* px */字尾，會編譯出適應不同dpr的字號

3、對邊框樣式增加/* no */字尾，會保持原樣

.box{

    border: 1px solid #fff; /* no */}

// 會被編譯成如下：.box{

    border: 1px solid #fff;

}