解决：ValidationError: Invalid options object. PostCSS Loader ......

问题背景 ：

    使用 vue/cli @5.x 脚手架 工具搭建一个初始化 项目架子，在 vue.config.js 里面 配置 移动端 的 适配性插件（ postcss-pxtorem ）的代码时，运行启动项目时报错如下图 ：

Compiled with problems:

ERROR in './xxx/xx'

Module build failed (from './xxx/xx'):

        ValidationError: Invalid options object. PostCSS Loader has been initialized using an options object that does not match the API schema.

- options has an unknown property 'plugins'. These properties are valid:

   object { postcssOptions?, execute?, sourceMap?, implemntation? }

---

编译时出现问题：
'./xxx/xx' 中出现错误
模块生成失败（来自“./xxx/xx”）：
        ValidationError: 选项对象无效。PostCSS Loader 已使用与 API 架构不匹配的选项对象进行初始化。
- 选项具有未知属性 “plugins”。这些特性有效：

    object { postssOptions？，execute？，sourceMap？，implementation？}

---

其实后来复盘的时候才后知后觉，上面报错信息已给提示 ： postssOptions

最后面的解决办法就是使用的它。

下图是 @4 版本的配置写法 ： 

如上写法配置，使用 @5 脚手架搭建的架子启动会报错如下 

---

各种百度解决 ：

---

---

1、首先打开终端执行  npm uninstall @vue/cli -g  卸载掉当前 5.x 的版本（ mac 版本 的前面需要加上 sudo ）

2、接着执行  npm install -g @vue/cli@4  直接下载 @4 版本（ mac 版本 的 前面需要加上 sudo ）
vue --version  这时候看到 vue-cli 已经是 @4 版本的了

最后再按照创建项目的步骤重新走一遍就 OK 了

【个人还是喜欢用新的，所以出台了新的解决方案 请向下看】

---

时隔多日，看见🈶️大佬评论说是

可以不降版本的，用 postcssOptions 套住 plugins 就行了

好的，上代码 ：

css: {
    loaderOptions: {
      postcss: {
        postcssOptions: {
          plugins: [
            require('postcss-pxtorem')({
              rootValue: 16, // （Number | Function）表示根元素字体大小或根据input参数返回根元素字体大小。
              unitPrecision: 5, //  （Number）允许REM单位增加的十进制数字。
              propList: ['font', 'font-size', 'line-height', 'letter-spacing'], // （Array）可以从px更改为rem的属性。
              // 值必须完全匹配。
              // 使用通配符*启用所有属性。例：['*']
              // *在单词的开头或结尾使用。（['*position*']将匹配background-position-y）
              // 使用!不匹配的属性。例：['*', '!letter-spacing']
              // 将“ not”前缀与其他前缀组合。例：['*', '!font*']
 
              replace: true, // Boolean）替换包含rems的规则。
              mediaQuery: false, // （Boolean）允许在媒体查询中转换px。
              minPixelValue: 0, // Number）设置要替换的最小像素值。
              exclude: /node_modules/i // （String, Regexp, Function）要忽略并保留为px的文件路径。
            })
          ]
        }
      }
    }
  },

---

最终：初始化版本的 vue.config.js 代码为 ：

const { defineConfig } = require('@vue/cli-service');
module.exports = defineConfig({
  transpileDependencies: true,

  // postcss.config.js文件内容在vue.config.js内进行的配置
  css: {
    loaderOptions: {
      postcss: {
        // 可以不降版本，用 postcssOptions 套住 plugins 就行了 :{}
        postcssOptions: {
          plugins: [
            require('postcss-pxtorem')({
              // 基准值 以 iPhone6 为准, 设计稿的尺寸一般为 750px , 2 倍图
              // 1rem = 37.5px
              rootValue: 37.5,
              // 所有的样式属性中只要有尺寸单位都转换, style样式中的尺寸不会转换
              // 建议如果你用了 postcss-pxtorem 插件后, 最好就不要用style来写样式
              propList: ['*'],
              // selectorBlackList: ["van"],
            }),
          ],
        },
      },
    },
  },
});

感谢大佬的点评与支持哟（^_^）