vue 自动px单位自动转换rem

vue 适配移动端 假设设计图是375

第一步 安装 lib-flexible

npm i lib-flexible --save

第二步 安装 px2rem-loader

　　npm install px2rem-loader --save-dev

第三步 引入lib-flexible

　　import 'lib-flexible/flexible'

 

第四步 最重要的一步 配置utils文件

const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      remUnit: 37.5
    }
  }
//在generateLoaders方法中添加px2remLoader

const loaders = [cssLoader,px2remLoader]

ps:npm的安装命令--save是将包装到package.json的dependencies     而--save-dev是将包装到package.json的devDependencies中

第一个相当于是安装插件 第二个是安装依赖包

 

注意！！：如果是750的设计图需要将第四步的remUnit替换成750 这样生成出来的比例就是1rem=100px

最后测试下。。

测试没问题

转载于:https://www.cnblogs.com/xiechuanghong/p/10855572.html