vue項目適配手機端 lib-flexible px2rem-loader px轉rem

在新公司熟悉項目時發現項目寫的都是以px爲單位，但是頁面上顯示的都是rem單位。。。
這是什麼鬼。。翻了項目結構也沒找到在哪裏適配的rem。。。然後也不好意思問別人。。。
然後就。。。

在網上查了一下，原來真的有一種方法可以直接把px轉換成rem的方法，，是lib-flexible配合px2rem-loader插件
然後自己就試着做了一下，真的很好用。。
1.首先是安裝：lib-flexible

npm i lib-flexible --save-dev

2.在main.js中引入lib-flexible

//移動端適配
import 'lib-flexible/flexible'

3.安裝px2rem loader

npm install px2rem-loader --save-dev

4.打開build/utils.js文件，找到exports.cssLoaders方法，在裏面添加如下代碼

const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      remUint: 75
    }
  }

5.同時，在generateLoaders方法中添加px2remLoader

const loaders = [cssLoader, px2remLoader]

記得關掉項目重啓！！

記得關掉項目重啓！！

記得關掉項目重啓！！

然後你就會神奇的發現，控制檯中的px已經變成了了rem
1.此方法只能將.vue文件style標籤中的px轉成rem，不能將script標籤和元素style裏面定義的px轉成rem
2.如果在.vue文件style中的某一行代碼不希望被轉成rem，只要在後面寫上註釋 / no/就可以了**