步骤：
一：安装 lib-flexible
npm install lib-flexible --save
二·、在main.js文件引入lib-flexible
import ‘lib-flexible/flexible’
三、安装px2rem-loader
npm install px2rem-loader --save
四、安装postcss-pxtorem
npm install postcss-pxtorem //高版本可能会报错，建议5.1.1
五、在vue.config.js文件夹module.exports{}加入css
module.exports = {
css: {//像素单元生成rem单位自适应
loaderOptions: {
postcss: {
plugins: [
require('postcss-pxtorem')({
rootValue: 192,//Number | Function）表示根元素字体大小或根据input参数返回根元素字体大小。（我电脑分辨率为19201080，所以设置192）
unitPrecision: 5, //（Number）允许REM单位增加的十进制数字
propList: ["", 'font-size', 'line-height', 'padding'],//(Array）可以从px更改为rem的属性。有样式遗漏可自行在该数组中添加
selectorBlackList: [],//(Array）要忽略的选择器，保留为px
replace: true,//（Boolean）替换包含rems的规则
mediaQuery: false,//（Boolean）允许在媒体查询中转换px
minPixelValue: 0,//（Number）设置要替换的最小像素值
exclude: /node_modules/i//（String, Regexp, Function）要忽略并保留为px的文件路径。
// ** 忽略单个属性的方法:在像素单位声明中使用大写字母，将px写为Px。 border: 1Px solid; 或 border-width: 2PX;
}),
]
}
}
},
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
六、更改node_modules文件夹下的lib-flexible文件夹下的flexible.js文件
将width = 540dpr 改为width = width dpr
function refreshRem(){
var width = docEl.getBoundingClientRect().width;
if (width / dpr > 540) {
width = width dpr;
}
var rem = width / 10;
docEl.style.fontSize = rem + 'px';
flexible.rem = win.rem = rem;
}
1
2
3
4
5
6
7
8
9
七、查看是否生效
重启项目，在浏览器控制台查看html标签中是否存在style="font-size: **px;"样式属性
