vue-cli4 通过 amfe-flexible+postcss-pxtorem 实现rem自适应布局

网上找了很多cli4 rem适配的方案，有lib-flexible+postcss-pxtorem和lib-flexible+postcss-px2rem的方案实现，但是好像lib-flexible已经弃用，改用amfe-flexible了，而且我也搞不清pstcss-px2rem和postcss-pxtorem的区别(我太菜了，求大佬们在评论区解答)。既然有一种方法可以用，就写下来当个笔记也是一个学习的过程。

1. 安装 amfe-flexible

npm install --save amfe-flexible       // 安装命令

安装完成后，在package.json中会显示该依赖

2. 在项目入口文件main.js中引入 amfe-flexible

import 'amfe-flexible'

3. 添加meta标签

在首页中(项目中-public-index.html)中添加以下meta标签

<meta name="viewport" content="width=device-width, initial-scale=1.0">

4.  安装postcss-pxtorem插件

postcss-pxtorem可以将px单位自动转换为rem单位，可以让开发人员直接按照设计图进行布局，不需要担心样式尺寸不对的问题。

cnpm install postcss-pxtorem@5.1.1 -D 

 遇到的问题

之所以安装的命令不是npm install postcss-pxtorem -D,是因为默认的安装方式安装后好像版本过高，会在npm run serve的时候出现报错，截止到2021.10.4通过这个指令安装上的postcss-pxtorem版本为6.0，但是提示需要8.0以上的版本？如下图，解决方案就是安装5.1.1的指定版本，求解答这个问题的真正解决方案

5. 配置postcss-pxtorem

在安装postcss-pxtorem的时候会生成一个文件.postcssrc.js

如果没生成请手动创建

在.postcssrc.js文件中进行如下配置

module.exports = {
  "plugins": {
    // 兼容浏览器，添加前缀
    "autoprefixer": {
      overrideBrowserslist: [
        "Android 4.1",
        "iOS 7.1",
        "Chrome > 31",
        "ff > 31",
        "ie >= 8",
        "last 10 versions", // 所有主流浏览器最近10版本用
      ],
      grid: true,
    },
    "postcss-pxtorem": {
      rootValue:75, // 适配的尺寸 75为750 375为37.5...
      propList: ["*"], //是一个存储哪些将被转换的属性列表，这里设置为['*']全部，假设需要仅对边框进行设置，可以写['*', '!border*']
      unitPrecision: 6, //保留rem小数点多少位
      selectorBlackList: ['.van'],  //则是一个对css选择器进行过滤的数组，比如你设置为['fs']，那例如fs-xl类名，里面有关px的样式将不被转换，这里也支持正则写法。
      replace: true,
      mediaQuery: false, //媒体查询( @media screen 之类的)中不生效
      minPixelValue: 2, //px小于2的不会被转换
    },
    // "postcss-import": {},
    // "postcss-url": {},


  }
}

 6. 配置完后npm run serve 在各尺寸下查看是否生效