vue2.6 element-ui 按需引入样式未生效 Error: Cannot find module ‘babel-preset-es2015解决

element-ui按需引入遇到两个问题

• 元素会显示，但是样式没有生效
• 编译过程中遇到错误
  • Error: Cannot find module ‘babel-preset-es2015‘
    官方文档：element-ui按需引入

一、样式问题：

引入组件的同时，要引入样式文件
main.js中：

import Vue from 'vue'
import App from './App.vue'
import router from './router'
//引入组件及对应的样式文件
import {Button, Table, Upload} from 'element-ui'
import 'element-ui/lib/theme-chalk/button.css'
import 'element-ui/lib/theme-chalk/table.css'
import 'element-ui/lib/theme-chalk/upload.css'

Vue.config.productionTip = false
Vue.use(Table)
Vue.use(Button)
Vue.use(Upload)
new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

二、编译报错

官方文档中这样写：
借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。

首先，安装 babel-plugin-component：

npm install babel-plugin-component -D
然后，将 .babelrc 修改为：

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

解决方案：

项目中使用的vue/cli脚手架版本为4.x，babel配置文件为babel.config.js

babel.config.js可以视为与.babelrc效果相同

安装依赖
npm i @babel/preset-env -D

而且，也不再使用es2015，改成@babel/preset-env，两者都是用来编译es6语法
在babel.config.js中配置：

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset',
    ["@babel/preset-env", { "modules": false }]
  ],
  plugins: [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

此时项目就可以跑起来了