vantUi

 npm install postcss-px-to-viewport --save-dev   //安装rem 配置

项目目录下创建 postcss.config.js 进行如下配置

module.exports = {
    plugins: {
        // postcss-pxtorem 插件的版本需要 >= 5.0.0
        'postcss-pxtorem': {
            rootValue({ file }) {
                return file.indexOf('vant') !== -1 ? 37.5 : 75; //设计图750 填75
            },
            propList: ['*'],
            exclude: /node_modules/i,//排除node_modules目录
            selectorBlackList: ['vant-', '.my-'],//过滤掉vant-开头的元素选择器
        },
    },
};

 安装 npm i -S amfe-flexible

移动端适配  在index.html里替换 如下代码
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

在min.js 里导入 

//h5rem适配
import 'amfe-flexible/index.js'

这里报错 postcss-pxtorem 需要 8. 我以为要使用postcss-pxtorem 8.以上的版本就去看了一下postcss-pxtorem版本最高才6.0

这里降低  postcss-pxtorem@5.1.1

     npm i postcss-pxtorem@5.1.1    再次运行就可以了

注意rem适配 涉及到px单位  不能写到行内样式里 否则失效

第二种配置  项目目录创建vue.config.js  

// const autoprefixer = require('autoprefixer');  没用到
const pxtorem = require('postcss-pxtorem');

module.exports = {
  outputDir: 'dist',
  publicPath: process.env.NODE_ENV === 'production' ? '/vant-demo/' : '/',
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
        //   autoprefixer(),
          pxtorem({
            rootValue: 37.5,
            propList: ['*']
          })
        ]
      }
    }
  }
};

自动按需引入组件 (推荐)  npm i babel-plugin-import -D