vue 给UI库添加按需加载时启动项目时 babel-preset-es2015 报错

痛定思痛。 2023-10-11 13:57 12阅读 0赞

项目使用vue cli3脚手架工具构建  
按照element 官方文档中所示。

npm install babel-plugin-component -D

然后添加.babelrc文件

\{  
"presets": \[\["es2015", \{ "modules": false \}\]\],  
"plugins": \[  
\[  
"component",  
\{  
"libraryName": "element-ui",  
"styleLibraryName": "theme-chalk"  
\}  
\]  
\]  
\}  
报如下错误：

Error: Cannot find module 'babel-preset-es2015' from 'C:\\Users\\Administrator\\Des  
ktop\\vueProject\\vuedemo'  
问题出在第二步，我是用vue3.0搭建的脚手架，只有一个babel-config.js的文件夹，但是把放进这个文件夹会报错，所以我在项目根目录新建了一个.babelrc文件，运行时发现报错es2015什么的，于是运行npm install babel-preset-es2015 --save-dev 安装es2015。

安装完成还是报错：plugin/preset files are not allowed to export objects, only functions

解决方法：

1.安装@babel/preset-env；项目目录下，运行命令行

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

\{  
"presets": \[\["@babel/preset-env", \{ "modules": false \}\]\],  
"plugins": \[  
\[  
"component",  
\{  
"libraryName": "element-ui",  
"styleLibraryName": "theme-chalk"  
\}  
\]  
\]  
\}  
3.重跑项目  
其实.babelrc的配置项，可以写入到babel.config.js文件中，之后不再需要.babelrc文件了

发表评论取消回复

表情：

评论列表（有 0 条评论，12人围观）

还没有评论，来说两句吧...

相关阅读

相关 java项目启动时加载数据

实际应用中，我们会有在项目服务启动的时候就去加载一些数据或做一些事情这样的需求。为了解决这样的问题，spring Boot 为我们提供了一个方法，通过实现接口 Comma...

冷不防/ 2024年05月23日 22:24/ 0 赞/ 72 阅读

相关 SpringBoot项目启动时预加载

SpringBoot项目启动时预加载 ![在这里插入图片描述][a96d456a1914473d8047b33e75c951c8.jpeg_pic_center] Sp

古城微笑少年丶/ 2023年10月15日 17:08/ 0 赞/ 67 阅读

相关 vue 给UI库添加按需加载时启动项目时 babel-preset-es2015 报错

项目使用vue cli3脚手架工具构建按照element 官方文档中所示。 npm install babel-plugin-component -D 然后添加.ba

痛定思痛。/ 2023年10月11日 13:57/ 0 赞/ 13 阅读

相关 vue 项目中 Element UI 如何实现按需加载

一、Element UI 按需加载 1. 通过 `vue create element_test` 命令创建一个 `vue` 的项目 2. 通过 `npm i ele

悠悠/ 2023年03月04日 09:05/ 0 赞/ 13 阅读

相关 antd按需加载

非按需加载 App.js import { Button } from 'antd'; index.css或者App.css @import '~

朴灿烈づ我的快乐病毒、/ 2023年01月18日 06:47/ 0 赞/ 229 阅读

相关 element-ui 组件按需加载实现

在实现element-ui按需加载前，需要先安装好element-ui和 babel-plugin-component：借助 babel-plugin-component

我就是我/ 2023年01月14日 05:58/ 0 赞/ 354 阅读

相关 elementUI按需加载，ant-design-vue按需加载

ant-design-vue按需加载的方法：首先运行安装 `npm i babel-plugin-import --dev` 在babel.config.j

川长思鸟来/ 2022年12月20日 03:20/ 0 赞/ 406 阅读

相关 vue antd 按需加载报错.bezierEasingMixin()

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NyaXNf

Love The Way You Lie/ 2022年11月24日 14:27/ 0 赞/ 146 阅读

相关 vue项目优化之页面的按需加载(vue+webpack)

通过vue写的单页应用时，可能会有很多的路由引入。当打包构建的时候，javascript包会变得非常大，影响加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被

快来打我*/ 2022年05月20日 09:21/ 0 赞/ 265 阅读

相关 vue按需加载组件,异步组件

说实话,我一开始也不知道什么叫按需加载组件,组件还可以按需加载???后来知道了学不完啊...没关系,看我的按需加载组件,或者异步组件,主要是应用了component的

叁歲伎倆/ 2021年11月16日 11:18/ 0 赞/ 512 阅读