安裝插件：

安裝postcss-pxtorem

npm install postcss-pxtorem --save-dev

安裝lib-flexible

由于時間的問題，lib-flexible其實已經(jīng)棄用了，現(xiàn)在是使用名為amfe-flexible的插件，amfe-flexible實際上就是在lib-flexible的基礎(chǔ)上更新的，所以用法都是一樣。

npm i -s  amfe-flexible

安裝完畢只需要引入amfe-flexible

引入插件：

main.js文件引入：

import 'amfe-flexible'

創(chuàng)建配置文件：

在根目錄，和package.json同級，創(chuàng)建一個名為postcss.config.js的文件，然后里面的內(nèi)容我直接照搬vant提供的。

如果有這個文件，可以自行修改里面的內(nèi)容，沒有才創(chuàng)建。

module.exports = {
  plugins: {
    autoprefixer: {
      browsers: ['Android >= 4.0', 'iOS >= 8'],
    },
    'postcss-pxtorem': {
      rootValue: 37.5,
      propList: ['*'],
    },
  },
};

然后保存，這個時候我們再去vue里面，對元素設(shè)置px，運行時會發(fā)現(xiàn)網(wǎng)頁上自動轉(zhuǎn)換成了rem單位。

百度到一個新的配置

module.exports = {
  plugins: {
    'autoprefixer': {
      overrideBrowserslist: [
        'Android 4.1',
        'iOS 7.1',
        'Chrome > 31',
        'ff > 31',
        'ie >= 8'
      ]
    },
    'postcss-pxtorem': {
      rootValue: 37.5,
      propList: ['*']
    }
  }
}

黑名單
顧名思義，在黑名單中的類名，將不會自動rem轉(zhuǎn)換

module.exports = {
  plugins: {
    'autoprefixer': {
      overrideBrowserslist: [
        'Android 4.1',
        'iOS 7.1',
        'Chrome > 31',
        'ff > 31',
        'ie >= 8'
      ]
    },
    'postcss-pxtorem': {
      rootValue: 37.5,
      propList: ['*'],
      selectorBlackList: ['.van-notify',],
    }
  }
}