vue-cli3.0 创建vue项目,安装了antd-vue后,按照antd修改babel.config.js后,报错.

Question

Failed to compile.

./src/main.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: [BABEL] D:\3.0\pathfinder\src\main.js: .libraryName is not a valid Plugin property
    at Object.keys.forEach.key (D:\3.0\pathfinder\node_modules\@babel\core\lib\config\validation\plugins.js:52:56)
    at Array.forEach (<anonymous>)
    at validatePluginObject (D:\3.0\pathfinder\node_modules\@babel\core\lib\config\validation\plugins.js:50:20)
    at instantiatePlugin (D:\3.0\pathfinder\node_modules\@babel\core\lib\config\full.js:209:55)
    at cachedFunction (D:\3.0\pathfinder\node_modules\@babel\core\lib\config\caching.js:33:19)
    at loadPluginDescriptor (D:\3.0\pathfinder\node_modules\@babel\core\lib\config\full.js:200:10)
    at config.plugins.reduce (D:\3.0\pathfinder\node_modules\@babel\core\lib\config\full.js:69:20)
    at Array.reduce (<anonymous>)
    at recurseDescriptors (D:\3.0\pathfinder\node_modules\@babel\core\lib\config\full.js:67:38)
    at loadFullConfig (D:\3.0\pathfinder\node_modules\@babel\core\lib\config\full.js:108:6)
    at process.nextTick (D:\3.0\pathfinder\node_modules\@babel\core\lib\transform.js:28:33)
    at _combinedTickCallback (internal/process/next_tick.js:132:7)
    at process._tickCallback (internal/process/next_tick.js:181:9)

babel.config.js

module.exports = {
  presets: ["@vue/app"],
  plugins: [
    "import",
    { libraryName: "ant-design-vue", libraryDirectory: "es", style: true}
  ]
}

• 请问各位大神,这是什么问题.并且是为什么呢~?

Answer 1

配置写错了 plugins 本身数据结构就是 数组 ，可以配置多个 plugin。

而单个 plugin，如果需要传一些自定义配置，也是一个数组，格式为 [name, options, string]

参考babel-plugin-options

这样写就ok了

module.exports = {
  presets: ["@vue/app"],
  plugins: [
    [
        "import",
        { 
            libraryName: "ant-design-vue", 
            libraryDirectory: "es", 
            style: true
         }
     ]
  ]
}