webpack排除 elementui 后挂载部分组件

学员提问：vuecli 脚手架项目上线部署，做代码体积优化，遇到 elementUI 优化后报错问题

1.问题：运行编译后代码报错

• 代码展示

  
  image.png

• 错误展示

  
  image.png

2.解决方案：

使用 babel-plugin-component 插件

• 2.1 安装 babel-plugin-component npm i babel-plugin-component -D
• 2.2 添加 .babelrc 文件

{
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

from: https://element.eleme.cn/#/zh-CN/component/quickstart