vue3 + vant移动端rem适配

1. 安装：

	pnpm add vant
	pnpm add postcss-pxtorem --save-dev  // PostCSS 插件，用于将 px 单位转化为 rem 单位
	pnpm add amfe-flexible --save-dev  //用于设置 rem 基准值

2. 在main.js中引入

	import Vant from 'vant'
	import 'vant/lib/index.css'
	import 'amfe-flexible'

3. 在vue.config.js中做如下配置：

	import postCssPxToRem from 'postcss-pxtorem'
	module.exports = {
	  	postcss: {
	      plugins: [
	        postCssPxToRem({
	          //rootValue: 37.5, // Vant 官方根字体大小是 37.5
	          rootValue({ file }) {
	           	//如果设计稿的尺寸不是 375，而是 750 或其他大小，可以将 rootValue 配置调整为:
	           	//目的：当拿到width为750px的设计稿是其中的内容width是 多少就直接写多少即可，不用除以2了
	            return file.indexOf('vant') !== -1 ? 37.5 : 75
	          },
	          propList: ['*'], 
	        })
	      ]
	    },
    }

Vant官方文档

使用前：

使用后：

成功！