vue中使用第三方UI庫的移動端rem適配方案

需求：使用vue-cli腳手架搭建項目，而且使用第三方的UI庫（好比vant，mint ui）的時候，由於第三方庫用的都是用px單位，沒法使用rem適配不一樣設備的屏幕。

解決辦法：使用px2rem-loader插件將第三方ui庫的px轉換成rem單位。

(1) npm install px2rem-loader --save-dev 安裝插件
(2)而後在vue-cli項目找到built/utils文件，在裏面加上如下代碼：

var px2remLoader = {
  loader: 'px2rem-loader',
  options: {
    remUnit: 75     // (這裏是指設計稿的寬度爲 750 / 10)
  }
}

而後在generateLoaders函數裏面插入px2remLoader ，再重啓 npm run dev服務便可。

（3）把px轉換成rem的配置完成後，還須要在入口文件（main.js）裏面配置一段代碼，此代碼的目的是監聽window窗口大小的變化，從而動態改變html根節點的font-size的大小。達到適配不一樣設備的效果；（注意：不知道爲何要動態改變html根節點的font-size的話，建議去看一下rem的知識）

window.onresize = setHtmlFontSize;
function setHtmlFontSize(){
    const htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
    const htmlDom = document.getElementsByTagName('html')[0];
    htmlDom.style.fontSize = htmlWidth / 10 + 'px';
};
setHtmlFontSize();

上面代碼是爲了當第一次加載main.js的時候就設置根節點的（html節點）font-size。不然會出現混亂頁面。