vue element-ui 组件按需引入踩过的坑

import Vue from 'vue'
import App from './App.vue'
import { Button } from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(Button)

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

代码虽然只引入了一个按钮组件，其实build是把整个模块都打包了。

根据官网介绍：

按需引入借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。首先，安装 babel-plugin-component：

npm install -D babel-plugin-component

配置.babelrc文件
{
  "presets": [["es2015", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}
安装 babel-preset-es2015 插件
npm i -D babel-preset-es2015

报错：Plugin/Preset files are not allowed to export objects, only functions，说明babel版本太高了，不兼容。

两个方案可以解决：

1、降级到 babel 6.0 版本
2、安装新插件

npm i -D babel-preset-env

配置.babelrc文件
{
  "presets": [["env", {"modules": false}]],
  "plugins": [[
    "component",
    {
      "libraryName": "element-ui",
      "styleLibraryName": "theme-chalk"
    }
  ]]
}