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