vue2.0项目 单位px转换rem配置

 ps：px换算成rem，可直接在项目中写px的，无需写成rem，如需要使用px单位不换算则写成Px,大写的P

项目添加依赖 px2rem-loader和lib-flexible模块，使用命令安装：

npm i px2rem-loader lib-flexible -D

在main.js中引入

import 'lib-flexible/flexible'

找到项目下config文件夹下的utils.js文件，添加如下代码

  const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      remUnit: 75     //这个75是设计图的十分之一，如设图是750，即是75，设计图640，即,64
    }
  };

并使用， 例如：

 

最后重启项目：npm run dev，查看效果可以直接写样式单位px，浏览器控制台查看css代码，发现自动转换成rem单位了，我设置的是1rem=75px的换算。