elememt-ui按需引入组件报错

最新推荐文章于 2024-06-09 00:15:00 发布

原创最新推荐文章于 2024-06-09 00:15:00 发布 · 363 阅读

1 ·

CC 4.0 BY-SA版权

本文介绍如何在基于Vue CLI 3的项目中正确配置按需加载Element UI组件的方法，包括解决babel编译错误的具体步骤。

背景：基于vue-cli3搭建的项目，按需引入报错

按照官方文档，按需引入组件，如下：
1.安装：npm install babel-plugin-component -D
2.在babel.config.js中修改配置

module.exports = {
  presets: [["es2015", { modules: false }]],
  plugins: [
    [
      "component",
      {
        libraryName: "element-ui",
        styleLibraryName: "theme-chalk",
      },
    ],
  ],
};

3.运行后babel编译报错：
Cannot find module ‘babel-preset-es2015’
4.查询文档发现这么一句：
该 preset 不推荐使用。如果你想保持最新，请使用 env preset
5.解决办法：
1）安装 npm install --save-dev @babel/preset-env
2）修改babel.config.js中"es2015" 为"@babel/preset-env"
3) 重新编译，成功

官网链接参考：https://babel.docschina.org/docs/en/6.26.3/babel-preset-es2015/