px自动换算成rem，我看网上有很多有关的博客，花了一上午时间做了一下，整理出来两种方法（不多，但都是在我的项目中实际配置好的，以后看机会再补充）
首先分享两个查看版本号的命令（好记性不如烂笔头么）：
1、查看vue的版本号：npm list vue（我的是vue@3.0.3 ）
px自动换算成rem，在我的项目中使用成功的有两种方法：
一、引入vant并配置
Vant 是针对移动端的 UI 组件库，vant3.0版本开始全面拥抱Vue3，他的官方文档里面推荐了两种px自动转化为rem的插件，postcss-pxtorem 和 lib-flexible（目前已不再更新，但是可以由 amfe-flexible 代替 ）
1.1 安装插件
npm install --save lib-flexible //引入lib-flexible
npm i -s amfe-flexible //引入amfe-flexible（推荐）
npm install postcss-pxtorem --save-dev //引入postcss-pxtorem（推荐）1.2 在main.js中引入插件
import 'amfe-flexible' //引入px自动转化rem工具1.3 创建配置文件
在项目的根目录下（与package.json、webpack.config.js同级）创建一个postcss.config.js文件，并在文件中引入以下配置：
module.exports = {
plugins: {
'autoprefixer': {
overrideBrowserslist: [
'Android 4.1',
'iOS 7.1',
'Chrome > 31',
'ff > 31',
'ie >= 8'
]
},
'postcss-pxtorem': {
rootValue: 37.5,
propList: ['*'],
selectorBlackList: ['.van-notify', ], //黑名单内的类名，将不会自动rem转换
}
}
}1.4 测试
这时，第一种方法，就已经配置完了，需要写入含有px的标签进行测试，重启终端测试效果如下：
1.5 配置过程中遇见的小问题
在配置过程中遇到这样的一个问题：
vue中安装postcss-pxtorem插件，报错“ Error: PostCSS plugin postcss-pxtorem requires PostCSS 8.”
发现需要降低一下postcss-pxtorem版本（postcss-pxtorem版本最高才6.0），然后我降成了5.1.1
npm i postcss-pxtorem@5.1.1二、使用lib-flexible、postcss-loader和postcss-px2rem
2.1 安装插件（如题 使用的插件有三个：lib-flexible、postcss-loader、postcss-px2rem）
npm install --save lib-flexible//引入lib-flexible
npm install --save-dev postcss-loader postcss-px2rem//引入postcss-loader和postcss-px2rem
2.2 在项目main.js文件引入lib-flexible
import 'lib-flexible/flexible.js'2.3 在项目public目录下的index.html头部加入手机端适配的meta代码
<!-- 手机端适配 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,minimum=1.0,user-scalable=no">2.4 在根目录下创建vue.config.js（我在之前已经创建过的），并配置如下信息
module.exports = {
css: {
//css预设器配置项
loaderOptions: {
css: {
importLoaders: 1 // @import 引入的文件可被一个loader处理 （2 可被两个loader处理）
},
// 手机端px转化为rem
postcss: {
// options here will be passed to postcss-loader
plugins: [require('postcss-px2rem')({
remUnit: 75 //如果是750的设计图需要将remUnit替换成75 这样生成出来的比例就是1rem=100px
})]
}
}
}
}2.5 测试（跟第一种方法的测试过程一样，不做赘述）
tips：据借鉴的大大说：与原来的vue-cli 2.x版本不同的是：如果使用最新版本的@vue/cli初始化vue项目时，通常看不到webpack的配制文件。而在原来的2.x版本，我们可以在utils.js中轻松配制px2rem相关配置。为了解决这个问题，我研究了一下vue-cli的官方文档，发现我们仍然可以像以往那样配制。在Vue-cli2.x、Vue-cli3.x、Vue-cli4（我的是4.5.4）中，应该都可以使用，这就有点强了喂。
注意（摘自原文）：当你遇到1px的边框时，通常容易发现页面缺失部分边框，这时你可以使用/*no*/语法来屏蔽该属性转换，例如：
border: 1px solid red; /*no*/由于字体的特殊性，我们在编译font-size属性时，通常不使用rem单位，这时候你可以这样使用：
font-size: 24px; /*px*/ 借鉴的原文链接（来自于各位大大）：
vue cli4引入vant并配置自动rem换算 postcss-pxtorem和lib-flexibl + 黑名单：https://www.mulingyuer.com/archives/377/
vue vue-cli @vue/cli将px转换成rem单位配置(flexible,px2rem)：https://blog.csdn.net/weixin_41424247/article/details/80867351
vue中安装postcss-pxtorem插件，报错“ Error: PostCSS plugin postcss-pxtorem requires PostCSS 8.”：https://www.cnblogs.com/liangziaha/p/14492288.html