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前端开发资源网 » Vue CLI使用element-ui按需引入报错:Error: Cannot find module 'babel-preset-es2015'

推荐阅读:

设置SSL后如何实现https自动跳转

Intellij IDEA WebStorm/PhpStorm中文输入框无法跟随怎么办?

Animate.css动画库的安装与使用

JQuery几个mouse事件的区别和用法

input[type=file]去掉“未选择任何文件”及样式改进

赞 (1)
分享到: +

评论 沙发

Avatar

换个身份

  • 昵称 (必填)
  • 邮箱 (选填)