移动端vue项目rem适配（vant组件库）

1.安装移动端适配方案---动态设置rem

npm i lib-flexible --save

2.在main.js引入lib-flexible

import 'lib-flexible/flexible'

3.安装normalize.css格式化样式

npm install --save normalize.css

4.在main.js中引入normalize.css

import 'normalize.css'

5.安装babel插件，将 import 的写法自动转换为按需引入的方式（vant按需引入使用）

npm i babel-plugin-import -D

//在.babelrc 中添加配置
module.exports = {
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
};

6.安装postcss-pxtorem

npm install postcss-pxtorem -D

7.配置postcss-pxtorem
在根目录的.postcssrc.js文件中修改

module.exports = {
  plugins: {
    // postcss-pxtorem 插件的版本需要 >= 5.0.0
    'postcss-pxtorem': {
      rootValue({ file }) {
        //vant样式根据375设计稿，其他根据750设计稿
        return file.indexOf('vant') !== -1 ? 37.5 : 75;  
      },
      //需要转化成rem的属性
      propList: ['*'],
    },
  },
};

8.即可结合vant组件库进行使用