vue3（语法糖steup语法）工程中的rem布局适配 不用修改px（保姆级教程，必定成功）

1.通过npm下载对应的包，这里一共下载三个包

 npm i amfe-flexible -S
 npm i postcss postcss-pxtorem -D
 npm i autoprefixer

2.下载完包之后，在和src同级创建文件postcss.config.js

创建完文件后，在文件中加入以下代码

我用的是1920的设计稿，所以我直接写的192，如果是750的写75即可

需要注意的是 不要用export.exports 会报错

export default {
  plugins: {
    autoprefixer: {},
    'postcss-pxtorem': {
      rootValue: 192, // 75表示750设计稿，37.5表示375设计稿
      propList: ['*'],
    },
  },
}

3.在main.js中引入

在创建完文件，加入代码后，就可以在main.js中引入了

需要注意的是引入的文件并不是postcss.config.js，而是引入下载的第三方包

import 'amfe-flexible'

4.重新运行项目

当你都弄好之后，重新启动你的项目，这时候页面展示就自动rem适配了，不用去vite.config或者webpack的打包文件中做任何的配置。