Vue 结合webpack使用px2rem-loader

安装

Vue-cli使用的2.x

npm install px2rem-loader  
或者 yarn add  px2rem-loader  

webpack配置

在项目的/build/utils中配置

 const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      remUnit: 37.5,
      remPrecision: 2
    }
  } 
并在 generateLoaders 中添加 px2remLoader  

配置如下：

最终utils配置文件如下, remUnit 指的是设计稿/10 ,比如iphone6的375/10，即1rem=37.5px;

设置好后重新运行即可。

建议结合 lib-flexible

npm i lib-flexible    
或者yarn add lib-flexible

然后在main.js中引入lib-flexible
import 'lib-flexible/flexible'   

关于retina屏幕1px像素问题

例如设置border-bottom:1px solid #ddd;这里不希望他转变成rem

可以如下  border-bottom:1px solid #ddd; /*no*/