Vue-cli3 Pc端 px转rem 自适应

1、安装lib-flexible

yarn add lib-flexible

2、安装px2rem-loader

px2rem-loader

 3、修改flexible.js 将540改为width

4、在main.js中引入lib-flexible

5、配置vue.config.js

chainWebpack: (config) => {
        config.module
            .rule('scss')
            .oneOf('vue')
            .use('px2rem-loader')
            .loader('px2rem-loader')
            .before('postcss-loader') 
            .options({ remUnit: 192, remPrecision: 8 })
            .end();
  }

其中 remUnit 为设计稿的宽度/10 remPrecision 为空值rem计算的精度值

6、重启项目即大功告成