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 ：

代码语言：javascript复制

npm install babel-plugin-component -D

然后，将 .babelrc 修改为：

代码语言：javascript复制

{
  "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 ：

代码语言：javascript复制

npm i @babel/preset-env -D

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

代码语言：javascript复制

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

这样就可以了。

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

babel.js vue.js 编程算法 javascript

0 人点赞