Vue2.x 安装 ECharts 报错解决指南

1. 问题描述

首先，如果你在 Vue2.x 项目中直接进行安装：

npm install echarts

会导致以下错误：

Compiled with problems: ERROR vue__WEBPACK_IMPORTED_MODULE_0__.default is undefined @webpack-internal:///./src/router/index.js:8:1 ./src/router/index.js@http://localhost:8080/js/app.js:74:1 __webpack_require__@http://localhost:8080/js/app.js:215:32 fn@http://localhost:8080/js/app.js:483:21 @webpack-internal:///./src/main.js:5:84 ./src/main.js@http://localhost:8080/js/app.js:52:1 __webpack_require__@http://localhost:8080/js/app.js:215:32 __webpack_exports__<@http://localhost:8080/js/app.js:1403:109 __webpack_require__.O@http://localhost:8080/js/app.js:265:23

'C:\Users\Desktop\agrivue2\src' ERROR [eslint] Failed to load config "eslint:rnpm installommended" to extend from. Referenced from: C:\Users\Desktop\agrivue2\package.json

这里有两个问题：

• vue__WEBPACK_IMPORTED_MODULE_0__.default is undefined
• Module not found: Error: Can't resolve 'echarts'

第一个问题

这个错误通常表示vue模块没有正确导入。

第二个问题

[eslint] Failed to load config "eslint:rnpm installommended" to extend from这个错误可能是由于 ESLint 配置文件中的拼写错误或配置问题。

这一系列问题就是和当前版本不兼容导致的。

2. 删除安装依赖包

在根目录执行：

npm uninstall echarts

但是删除掉以后并没有全部删除掉，有其缓冲的数据和 Vue2.x 不兼容，所以我们需要删掉缓冲数据。

执行：

清除npm缓存以确保没有残留的缓存文件：

npm cache clean --force

为了确保没有残留的缓存文件，你可以删除node_modules目录并重新安装所有依赖。这一步是可选的，但推荐执行以确保一切正常。

Remove-Item -Recurse -Force node_modules

这一段代码可以删除依赖包和缓存文件。

Remove-Item -Force package-lock.json

注意：这个文件不是package.json文件。

这一段代码可以删除依赖包的具体信息，比如版本号、出厂信息、版本等具体信息。

当然，删除它们是为了我们要把整栋楼推倒重新建造依赖包（根据package.json这个文件，这个文件为工程提供了安装echarts依赖包之前的依赖包信息，一会儿安装依赖包重造的时候可以按照这个模板进行下载，让工程恢复如初）。

3. 使用淘宝镜像加速下载

由于下载的安装包是国外的资源，数据比较慢，这里我们需要使用淘宝镜像来帮助我们加速下载。这里使用最新版的镜像：

npm config set registry https://registry.npmmirror.com

用以下命令查看是否配置成功：

npm config get registry

终端执行：

npm install

安装依赖包。下载完会生成新的那两个文件node_modules和package-lock.json。

4. 解决 ESLint 配置错误

但是运行还是会报错：

[eslint] Failed to load config "eslint:rnpm installommended" to extend from. Referenced from: C:\Users\Desktop\agrivue2\package.json You may use special comments to disable some warnings. Use // eslint-disable-next-line to ignore the next line. Use /* eslint-disable */ to ignore all warnings in a file. ERROR in [eslint] Failed to load config "eslint:rnpm installommended" to extend from. Referenced from: C:\Users\Desktop\agrivue2\package.json webpack compiled with 1 error

package.json文件中引用了一个不正确的 ESLint 配置。错误信息表明eslint:rnpm installommended是一个拼写错误或不正确的配置名称。正确的配置应该是eslint:recommended。

解决办法

编辑package.json文件

打开package.json文件，找到eslintConfig部分，确保extends字段的值是eslint:recommended。这里应该是echarts依赖包冲突进行修改，我们把它改回来。

保存一下。

5. 重新安装依赖包

由于我们的package.json文件发生了变化，我们需要重新安装依赖包。再次执行：

npm install

6. 解决 Vue 版本不兼容问题

但是我这里又遇到一个错误：

Uncaught runtime errors: ERROR vue__WEBPACK_IMPORTED_MODULE_0__.default is undefined @webpack-internal:///./src/router/index.js:8:1 ./src/router/index.js@http://localhost:8080/js/app.js:74:1 __webpack_require__@http://localhost:8080/js/app.js:215:32 fn@http://localhost:8080/js/app.js:483:21 @webpack-internal:///./src/main.js:5:84 ./src/main.js@http://localhost:8080/js/app.js:52:1 __webpack_require__@http://localhost:8080/js/app.js:215:32 __webpack_exports__<@http://localhost:8080/js/app.js:1403:109 __webpack_require__.O@http://localhost:8080/js/app.js:265:23 @http://localhost:8080/js/app.js:1404:53 @http://localhost:8080/js/app.js:1406:12

vue__WEBPACK_IMPORTED_MODULE_0__.default is undefined。这个错误通常表示 Vue 模块没有正确加载或导出。

因为我的package.json安装的是 Vue3 版本的，如果你们也遇到了就按照我以下的步骤执行。

执行：

npm install vue@2.6.14 vue-template-compiler@2.6.14

修改 Vue 模块版本号就行了。

7. 运行工程

然后执行工程：

npm run serve

工程恢复了，如果还需要使用echarts依赖，对于 Vue2.x 可以使用 4.x.x 版本的echarts，以找到兼容的依赖包。

有其他问题请留言。