vue-cli 中将 px 转为 rem

1.安装 lib-flexible，完成后在 main.js 中引入

npm i lib-flexible --save

// main.js
import 'lib-flexible/flexible';

2.安装 px2rem-loader

npm install px2rem-loader

然后在 build 文件夹下的 utils.js 中配置，加入下图中红框内容

其中 remUnit：37.5 表示在以 375px（iphone6）为基准的设计稿下 1rem = 37.5px

红框中内容更改如上，配置完成
结果 iphone6 下：


ipone5 下：


可以看出在 iphone6 即宽度为 375px 下 1rem = 37.5px，切换到 iphone5 宽度为 320px 时，1rem = 32px，自动完成转换。