vue移动端自动将px转换成rem

在开发移动端的过程中，如何频繁的去计算rem和px之间的转换时一件非常麻烦的过程，接下来提供一个vue框架可以自动转换

一、安装lib-flexible依赖

npm install lib-flexible --save

二、引入lib-flexible依赖

main.js中添加以下代码

import 'lib-flexible/flexible'

三、配置meta 标签内容

<meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0,user-scalable=no">

四、安装px2rem-loader依赖

npm install px2rem-loader --save-dev

五、配置相关px2rem-loader

在build下的 utils.js文件下，添加以下代码

 const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      remUnit: 75
    }
  }

const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader]

六、重启项目看效果

可以看到在网页中html的font-size已根据当前手机自动调整了font-size属性的大小
可以在项目中添加测试代码进行测试

可以看到最终该div的大小为10rem，实现了自动将px转换陈成rem