vue cli3 web端自适应 px自动转换rem

1、安装flexible库

```npm install lib-flexible```

2、在项目入口文件main.js里引入lib-flexible

```import 'lib-flexible'```

3、配置meta标签

在index.html文件当中（有的已经是有的，就不用修改了）

```<meta name="viewport" content="width=device-width, initial-scale=1.0">```

4、安装px2rem工具

```npm install px2rem-loader```

5、配置vue.config.js

```

module.exports = {

  chainWebpack: config => {

    config.module

        .rule('scss')

        .oneOf('vue')

        .use('px2rem-loader')

        .loader('px2rem-loader')

        .before('postcss-loader') // this makes it work.

        .options({ remUnit: 192, remPrecision: 8 }) // remUnit: 192代表以1920px为整体，如果设计稿的尺寸是750px，这里的值为75

        .end()

  },

}```

这时候重启一下就能生效了。

6.如果发现尺寸还是有问题，打开node_modules文件夹里的lib-flexible文件夹下的flexible.js，

flexible.js截图

找到以上代码，把

```width = 540*dpr ```

改成

 ```width = width *dpr。```

重启解决！