vue2x安装5.x版本的echarts依赖包所产生的一系列问题的解决方法

本文链接：https://blog.youkuaiyun.com/shitiankongyimol/article/details/143469227

首先Vue2x如果你直接进行安装：

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 配置文件中的拼写错误或配置问题。

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

删掉安装依赖包

在根目录执行：

npm uninstall echarts

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

执行：

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

npm cache clean --force

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

Remove-Item -Recurse -Force node_modules

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

Remove-Item -Force package-lock.json（注意这个文件不是package.json文件）

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

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

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

这里使用最新版的镜像：

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

用：

npm config get registry

来看看成功了没？

终端执行：

npm install

安装依赖包

下载完会生成新的那俩个文件node_modules和package-lock.json

但是运行还是会报错：

[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依赖包冲突进行修改我们把它改回来

保存一下

由于我们的package.json文件发生了变化：、

我们需要重新安装依赖包：

再次执行：

npm install

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

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版本的，如果你们也遇到了就按照我以下的步骤执行