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/就可以了**