Vue + Vant 配置移动端项目rem布局

问题:使用Vue + Vant 创建移动端项目配置rem布局自适应 移动端不经常写,时间久了就忘记怎么配置了,在这里记录一下,方便以后查询

根据Vant官网指示进行配置,

1.安装:

npm i -S amfe-flexible
npm install postcss postcss-pxtorem --save-dev

2.在main.js中引入

import "amfe-flexible"

3.在postcss.config.js文件下进行配置

module.exports = {
  plugins: {
    autoprefixer: {
      browsers: ['Android >= 4.0', 'iOS >= 8'],
    },
    'postcss-pxtorem': {
      rootValue: 37.5,
      propList: ['*'],
    },
  },
};

4.预期结果

达到图片中的效果就配置成功了,这是设置

补充

后面再一次使用vant配置移动项目的时候,出现了PostCSS plugin postcss-pxtorem requires PostCSS 8. Migration guide for end-u的报错提示,通过查找资料发现是postcss-pxtorem的版本不合适导致的,这里需要把版本号改为5.1.1,即可,亲测有效