vue-cli 3中element-ui按需引入element-ui报错

问题：

项目用的脚手架是 vue-cli 3，需要按需引入element-ui，按照element-ui官网的步骤进行按需引入，结果报错：Error: Cannot find module ‘babel-preset-es2015’。

按需引入

借助 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 3.x的版本，并没有官网的.babelrc文件，只有babel.config.js文件，而且项目不需要引入完整的element-ui，只需要引入部分，按官网的步骤安装babel-plugin-component后在babel.config.js写入内容，报错：connot find module babel-preset-es2015。

解决方案：

.babelrc文件和babel.config.js文件都是配置文件，可以视为相同，之后需要使用npm安装

1.安装@babel/preset-env

npm i @babel/preset-env -D

2.修改.babelrc文件，把es2015改成@babel/preset-env

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

然后重新执行 np run serve，就可以了。

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://shenqiku.cn/article/FLY_10457