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

德顺

发布于 2021-05-06 10:37:07

3.4K0

发布于 2021-05-06 10:37:07

文章被收录于专栏：前端资源前端资源

使用 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"
      }
    ]
  ]
}

这样就可以了。

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

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

babel.js