Vue Cli3.x-4.x 实现rem适配

Vue移动端rem适配

1.安装lib-flexible和postcss-px2rem

    npm install lib-flexible --save
    npm install postcss-px2rem --save

2.在main.js中引入lib-flexible

    import 'lib-flexible'

3.由于Vue Cli3及以后的版本省去了可见的配置项,需要自己在根目录(也就是package.json同级目录)下新建vue.config.js文件，在文件中写入以下代码

    module.exports = {
    css: {
        loaderOptions: {
          css: {},
          postcss: {
            plugins: [
              require('postcss-px2rem')({
                remUnit: 37.5 //根据设计图 
                //375的图就给37.5，也就是1rem=37.5px
              })
            ]
          }
        }
    },
}

4.重启服务，此时px已经被转换成rem啦

（以上不足之处欢迎指出，共同进步）

本文地址：https://blog.csdn.net/z19960925/article/details/107376438