vuecli3如何配置移动端px2rem

今天遇到的问题是有关vuecli3的，想做移动端适配，转成rem那种

咱都知道，vuecli3之后，webpack的配置都不见了，听说放内存里了。

很好，webpack还没学明白，还搞没了，想照猫画虎都找不见了。

渣渣不懂原理，就会ctrl+c，ctrl+v

解决方案：安装px2rem-loader 插件

npm i px2rem-loader -D

git 地址：https://github.com/Jinjiang/px2rem-loader

// vue.config.jsmodule.exports = {  chainWebpack(config) {      config.module          .rule('css')          .test(/\.css$/)          .oneOf('vue')          .resourceQuery(/\?vue/)          .use('px2rem')          .loader('px2rem-loader')          .options({              remUnit: 75      })    }}
// px2rem-loader 配置项// remUnit：根元素字体大小// remPrecision：rem小数点后精度

看到网上还有推荐postcss-plugin-px2rem，大概看了下，配置项更多一些，git地址：https://github.com/pigcan/postcss-plugin-px2rem，有兴趣的可以看下，反正我懒。

现在让我们来看看结果吧：

// css样式.box{  font-size: 16Px;  background: red;  width: 200px;  height: 200px;}

可以看到，css样式里写的是200px，实际运行的页面写的是rem。

⚠️不知道小伙伴们有没有注意到，font-size里的Px是大写的，嘿嘿，这个就很重要了啊，如果不想转成rem，就把px大写！