Vue CLI使用element-ui按需引入报错：Error: Cannot find module 'babel-preset-es2015'

使用 Vue CLI 创建了一个 Vue 2.x 的项目，配置完 element-ui 按需引入后报错：Error: Cannot find module 'babel-preset-es2015'

Element UI 官方提供的按需引入，需要借助 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 2.x 版本没有 .babelrc 文件，可以直接在 babel.config.js 文件中进行配置。

而且，也不再使用 es2015，改成 @babel/preset-env ，两者是相同的，其作用都是编译es6语法。

安装  @babel/preset-env ：

npm i @babel/preset-env -D

在 babel.config.js 文件中进行配置：

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

这样就可以了。

未经允许不得转载：Web前端开发资源网 - w3h5 » Vue CLI使用element-ui按需引入报错：Error: Cannot find module 'babel-preset-es2015'

推荐阅读：

Vue.js学习笔记——条件、循环、双向绑定

CSS3中元素背景的 gradient 渐变属性

利用css中的伪类 给元素设置特殊样式效果

jQuery.dotdotdot多行文本省略号插件的使用方法

写一写今天用阿里云安装wdCP搭建网站踩的坑