Vue手机端适配安装postcss-px2rem，lib-flexible自动px转rem

1.安装：

npm i postcss-px2rem lib-flexible --save-dev
或者
yarn add postcss-px2rem lib-flexible

2.在plublic中index.html删除meta标签：

flexible会根据屏幕页面自动添加<meta name="viewport"> 标签，动态控制initial-scale,maximun-scale,minimun-scale等属性的值

3.在src中main.js引入：

//导入rem 的 js,动态的设置了不同屏幕的html根元素的 font-size

import "lib-flexible"

4.配置vue.config.js：

module.exports=function(){
    devServer:{
        port:3000,
        open:true
    },
    //rem配置
    css: {
        loaderOptions: {
          css:{},
          postcss: {
              plugins: [
                  require('postcss-px2rem')({//这里是配置项，详见官方文档
                      remUint:37.5,
                      propList: ['*'], //设置px转换成rem的属性值，*表示所有属性的px转换为rem
                  }),
              ]
          }
        }
      }
}

如果没有配置vue.config.js，可以在build/vue-loader.config.js配置：

const precss = require('precss')
const pxtorem = require('postcss-px2rem')
module.exports = {
  ......
  postcss:[
      precss(),
      pxtorem({
          remUnit: 37.5, //设计尺寸
          propList: ['*']//自动转化rem
      })
  ],
}

配置完成后页面中使用px会自动转化成rem