一、使用插件

amfe-flexible会根据当前页面的尺寸去设置根元素的font-size

npm i -S amfe-flexible;

postcss-pxtorem讲px自动转换为指定单位

npm install postcss-pxtorem --save-dev

二、在项目中的配置

安装完以上两个插件后，我们在main.js入口文件处进行引入

import 'amfe-flexible'

然后在项目根目录新建一个postcss.config.js文件，项目架构如下

Vue3脚手架项目
	|-public
	|-src
	|-postcss.config.js

最后将一下代码直接复制到创建的postcss.config.js文件中

// postcss.config.js
module.exports = {
    plugins: {
        'postcss-pxtorem': {
            rootValue({ file }) {
                return file.indexOf('vant') !== -1 ? 37.5 : 75; // 因为vant框架是以375px的稿子为基础的，所以需要适配一下
            },
            propList: ['*'], // 需要转换的css属性，默认*全部
        }
    }
}

配置完之后我们就可以在项目中以px为单位去开发了，不再用我们手动去转换rem，插件会自动帮助我们转换为rem。