Nuxt2启动开发服务报path类型错误或Babel警告刷屏怎么解决

问题根本原因 #

你将Babel插件配置错误填写到了Nuxt顶层plugins字段中，该字段是用来声明项目自定义业务插件的文件路径的，仅支持传入字符串格式的本地路径，传入Babel插件数组配置自然会触发「path参数应为字符串」的启动报错。

解决方案 #

将Babel插件配置放置到nuxt.config.js的build.babel.plugins配置项下即可，完整配置示例如下：

export default {
  // 保留你原本的其他所有配置
  build: {
    babel: {
      plugins: [
        ["@babel/plugin-proposal-private-property-in-object", { "loose": true }]
      ]
    }
  },
  // 顶层plugins字段保留原有配置，不要填Babel相关内容
  plugins: []
}

该配置可以同时解决两个问题：

• 顶层plugins字段符合Nuxt参数要求，不会触发启动报错
• Babel可以正确读取到插件配置，消除loose模式不匹配的批量警告

如果配置后仍有残留警告，可统一配置三个关联Babel插件的loose属性为相同值：

build: {
  babel: {
    plugins: [
      ["@babel/plugin-proposal-class-properties", { loose: true }],
      ["@babel/plugin-proposal-private-methods", { loose: true }],
      ["@babel/plugin-proposal-private-property-in-object", { loose: true }]
    ]
  }
}

无需切换Nuxt版本，也不需要重装依赖，修改配置后重启开发服务即可生效。

内容的提问来源于stack exchange，提问作者Anonymous