vue中用vant写把px自动转换成rem

1.安装：

npm install px2rem-loader lib-flexible --save

2.找到main.js文件：

引入：import “lib-flexible/flexible.js”

3.设置mate标签

作用：设置设备的宽度一级缩放比例
在index.html中引入

4.安装px2rem-loader

npm install px2rem-loader

5.在根目录里找到postcss.config.js文件，添加下面的几行代码

module.exports = {
plugins: {
// …
autoprefixer: {
browsers: [‘Android >= 4.0’, ‘iOS >= 7’],
},
‘postcss-pxtorem’: {
rootValue: 37.5, // vant-UI的官方根字体大小是37.5
propList: [’*’],
},
},
};

但是这样写有可能控制台回报这样的错误：vue项目 autoprefixer 控制台 出现了警告问题：
Replace Autoprefixer browsers option to Browserslist config

Use browserslist key in package.json or .browserslistrc file.
原因是配置版本太高了，下面就是解决方案：
//更改前
module.exports = {
plugins: {
‘autoprefixer’: {
browsers: [‘Android >= 4.0’, ‘iOS >= 7’]
},
‘postcss-pxtorem’: {
rootValue: 37.5,
propList: [’*’]
}
}
}

//更改后
module.exports = {
plugins: {
‘autoprefixer’: {
overrideBrowserslist: [
“Android 4.1”,
“iOS 7.1”,
“Chrome > 31”,
“ff > 31”,
“ie >= 8”
]
},
‘postcss-pxtorem’: {
rootValue: 37.5,
propList: [’*’]
}
}
}