vue项目使用echarts，装包错误

最新推荐文章于 2024-07-05 10:34:38 发布

曉小筱芬

最新推荐文章于 2024-07-05 10:34:38 发布

阅读量4.2k

点赞数 1

分类专栏： vue 文章标签： vue echarts npm装包前端web webpack

本文链接：https://blog.csdn.net/weixin_43775306/article/details/89480628

版权

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

vue项目使用echarts，装包错误

错误描述
- 查找问题
- 继续解决
解决方法

错误描述

在vue项目中，使用了echarts做图表，上传代码后，使用git拉取下来，执行npm i 转包，
在这里插入图片描述

查找问题

发现有package.json文件中有vue-echarts
在这里插入图片描述
也可以通过npm echarts -v查到版本号

运行，出现错误提示如下

把echarts卸载再重新安装，还是失败，没有装到node modules ，还是会报错

继续解决

于是去网上找了一下资料，发现在这里插入图片描述

但是点进去webpack 打包后的文件，发现不会改，然后继续找了一下，可以去这个看看，https://github.com/ecomfe/vue-echarts/issues/213

然后执行这个，就可以了，在这里插入图片描述

解决方法

装包前：把package-lock.json和node_modules移除，再装包，重新build后就可以运行了。
在这里插入图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

曉小筱芬

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

Echarts安装失败

Wzw的博客

01-23

5990

npm 安装 Echarts 失败使用 npm 安装 Echarts ： npm install echarts --save 安装后报错，原因在于使用的 Vue 版本和 Echarts 版本不兼容。我使用的 Vue 版本号为 @2.6.11，而 Echarts 版本号为 @5.0.1。进入 package.json 查看版本号。 "dependencies": { "axios": "^0.21.1", "core-js": "^3.6.5", "echarts": "

vue2 + echarts + 地图项目学习笔记

weixin_61463372的博客

10-05

1743

课程链接在这里：慕课网实战课程 - 提升个人技术的真实项目演练 https://coding.imooc.com/learn/list/499.html

参与评论您还未登录，请先登录后发表或查看评论

vue2项目中使用到echarts时，ECharts 报错问题：Initialize failed: invalid dom的报错原因

weixin_54193181的博客

08-09

1784

项目中使用到echarts时，ECharts 报错问题

Vue 3 中集成 ECharts(附一些案例)

最新发布

jieyucx的博客

07-05

9317

在现代Web开发中，Vue 3以其卓越的性能和灵活的Composition API赢得了广泛的关注。而ECharts，作为开源的一个使用JavaScript实现的强大可视化库，以其丰富的图表类型和高度可定制性成为了数据可视化的首选工具之一。今天，我们将结合Vue 3的语法糖和ECharts，来详细探讨如何在Vue 3项目中集成ECharts，并不仅仅局限于折线图，而是展示一个通用的集成方法。

关于Vue2引入echarts报错

博客

05-08

311

报错：解决方法：就很突然~

Vue 项目打包后，报：Cannot read property ‘echarts’ of undefined

qq_36291747的博客

06-29

4528

1. 问题说明在 Vue 项目中，使用 echarts 来为项目添加图表。在本地运行测试时，是正常无错误的。可是，当把项目打包上线时，页面一直是白屏，且浏览器控制台输出如下错误： TypeError: Cannot read property 'echarts' of undefined 错误信息截图如下： 2. 问题分析从错误信息推测，是某个地方使用 x.y 形式调用 echarts 时，x 为 undefined 导致的错误。回到项目里，使用到 echarts 的地方大致有 2 处，分析一下：

Echart之vue安装异常报错

轻风细雨_林木木

10-26

447

解决办法：卸载： npm uninstall echarts //卸载重装： npm install echarts@4.9.0

记一次成功把Vue2后台项目改造成Vite2的踩坑经历

yilingsj的博客

06-02

7653

公司后台项目基于@花裤衩大神的vue-element-admin，随着项目功能的不断完善和需求不断增加，项目启动也变的越来越慢。慢到什么程度呢？我i7-10代16G内存的本本跑项目最快也需要近3分钟，实在难以忍受。几经折腾，终于成功改造成了vite。现在跑项目，5秒内即可跑起来，简直不要太爽！此次改造的过程遇到很多问题，现将遇到的问题做下记录，以防后续改造类似项目时继续踩坑。本次要改造的是一个基于vue-element-admin的后台项目。由于项目比较老，所以没有使用到typescript

Vue保姆级项目教程：十万字零基础开发信贷管理系统！

weixin_55355282的博客

03-09

937

本文档概述了信贷管理系统的开发过程和关键需求，包括用户管理、信贷申请、贷款审批、数据分析、安全性、兼容性、扩展性和用户界面。目的是提高信贷业务的效率和准确性，满足机构对信贷业务管理的需求。

配置vue3+vite+eslint+prettierrc项目

weixin_54000091的博客

12-06

1460

以上步骤适用于所有的vue3项目，因为仅仅上续功能仅仅是编译时检测而非运行时检测所以用任何打包工具编译项目运行都是没问题的。

Vue 中如何正确引入第三方模块的方法步骤

10-17

另外，有时开发者会直接在`Vue.prototype`上定义属性，如`Vue.prototype.$echarts = echarts`，但这可能会导致在模块过大时由于加载顺序问题而引发错误。总之，选择引入第三方模块的方法应根据实际项目需求和模块...

vue安装echarts失败使用cdn引用

weixin_42258740的博客

04-10

5856

vue安装echarts失败使用cdn引用echarts.js 正常状态安装echarts 安装 npm install echarts -S 或先安装淘宝镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org 再安装 cnpm install echarts -S 使用按需引入需要使用到title、legend等组...

vue-echarts npm run build 编译生产版本报错 UglifyJs

追梦猪的博客

12-04

736

问题描述： webpack构建vue项目，使用 vue-echarts组件时， npm run build 编译生产版本报错ERROR in 0.build.js from UglifyJsUnexpected token: name (raf) [./node_modules/...

vue引入echarts报错解决

weixin_44107140的博客

04-08

3484

在Vue项目中引入Echart（使用npm install指令）的时候报错： PS G:> npm install npm WARN old lockfile npm WARN old lockfile The package-lock.json file was created with an old version of npm, npm WARN old lockfile so supplemental metadata must be fetched from the registry. n

vue引入echart错误提示Error in mounted hook: "Error: Component series.line not exists. Load it first...

追梦猪的博客

12-04

7442

安装npminstallvue-echarts在vue中引入vue-echarts组件的时候报错了，如下图Error in mounted hook: "Error: Component series.line not exists. Load it first解决方法...

解决Vue2 Vue3使用echarts报错 There is a chart instance already initialized on the dom

ningmeng_CSDN的博客

06-09

1064

vue2 Vue3 解决echarts报错 There is a chart instance already initialized on the dom。

在vue项目中简单使用Echarts&第一次使用时的各种报错与解决

like896369216的博客

05-21

3577

关于echarts安装版本报错的解决办法，关于Uncaught (in promise) TypeError: Cannot read properties of null (reading 'getAttribute')错误的解决办法

vue引入echarts遇到的报错问题

weixin_63102971的博客

08-11

2998

vue引入echarts遇到的报错问题：在浏览器一直报“reading init”；在浏览器报“reading ‘getAttribute’”

记录一次ERROR in ./node_modules/css-loader?sourceMap!.报错处理

请告诉他

01-23

5029

项目运行多年，win系统本地环境开发成熟，打包到linux也无问题，近日npm install 和npm run dev 后出现报错信息如下 ERROR in ./node_modules/css-loader?sourceMap!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-ae1d291a","scoped":true,"hasInlineConfig":false}!./node_modules/sass-

springboot vue项目使用echarts折线图

05-11

首先，你需要在前端引入 ECharts 的库文件，可以通过 CDN 引入，也可以下载到本地引入。然后，你需要在 Vue 组件中引入 ECharts，并在 ...这样，你就可以在你的 Spring Boot + Vue 项目中使用 ECharts 折线图了。