1、npm插件
官方文档 https://www.npmjs.com/package/postcss-pxtorem
npm run install postcss-pxtorm --save
2、配置方法如下
在vue-cli3中，去掉了build和config文件夹。所有的配置都放到了vue.config.js中（默认为空，如果没有这个文件夹，自己写一个）
先上代码，vue.config.js的配置如下
`css: {
loaderOptions: {
postcss: {
plugins: [
require('postcss-pxtorem')({//这里是配置项，详见官方文档
"rootValue": 16,
// 哪些需要进行px转rem
"propList": ['*'],
// 排除哪些开头的如 .weui-button 等等
"selectorBlackList": ['weui','mu'],
// 最小转换，如低于 4px的不会进行转成rem
"minPixelValue": 4
}),
]
}
}
},`
2、需要写一个公用的rem.js文件
`\
const baseSize = 32; // 这个是设计稿中1rem的大小。
function setRem() {
// 实际设备页面宽度和设计稿的比值
const scale = document.documentElement.clientWidth / 750;
// 计算实际的rem值并赋予给html的font-size
document.documentElement.style.fontSize = (baseSize * scale) + 'px';
}
setRem();
window.addEventListener('resize', () => {
setRem();
});`
3、在main.js中引入
重启项目就ok了
可能遇到的坑：
如果个别地方不想转化px，可以简单的使用大写的PX 或Px
