vue3中使用vue-echarts遇到的bulid打包大坑！！！

BINGBIAN病变

于 2024-04-09 09:53:42 发布

阅读量152

点赞数 2

文章标签： vue.js echarts 前端

本文链接：https://blog.csdn.net/LIULANGAAA/article/details/137538541

版权

巨坑！！！一定要在main里面，全局注册组件的下面加上这一句

app.config.globalProperties.$echarts = echarts

不然调试可能是没任何问题，但是当你bulid完布上线之后控制台就会报这样奇奇怪怪的错误你还根本不知道是哪产生的错误

Uncaught (in promise) TypeError: an is not a function at index-04720eab.js:273:7616 at index-04720eab.js:325:16829

以下是可以使用的正常配置

main.js中全局注册组件

// 引入vue-echarts
import ECharts from 'vue-echarts'

import * as echarts from "echarts"

// 全局注册组件（也可以使用局部注册）
app.component('v-chart', ECharts)

app.config.globalProperties.$echarts = echarts

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

BINGBIAN病变

关注关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
vue3中使用vue-echarts遇到的bulid打包大坑！！！

vue3中使用vue-echarts遇到的bulid打包大坑！！！
复制链接

扫一扫

在vue中使用vue-echarts-v3的实例代码

10-18

主要介绍了在vue中使用vue-echarts-v3的实例代码，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下

地区js文件，Vue 项目打包后，报：Cannot read property ‘echarts’ of undefined

weixin_52828013的博客

07-21

232

然后，在需要使用 echarts 的地方，直接使用 this.$echarts 就能访问到 echarts 对象（这的 this 指的是 vue 的实例）。考虑到该文件最后是在图表组件文件中使用的，它是在 script 脚本部分引入的。打包后，js 处于严格模式，函数中的。从错误信息推测，是某个地方使用 x.y 形式调用 echarts 时，x 为 undefined 导致的错误。这里，经过控制台打印输出，确定可以正确访问到 echarts。，是一个回调函数，用于实现具体的主题设置。分支逻辑，即执行代码。

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

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

qq_36291747的博客

06-29

4398

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

taro+vue3 引入echarts图表后分包，上传时主包体积太大无法上传解决办法

weixin_43209133的博客

08-18

589

3、由于分包引入了echarts, 小程序上传时，分包里的echarts插件被打包到主包的common.js中导致主包体积过大无法上传，这时config下的dev.js 或者index.js添加以下代码，就可以了，打包时分包里的插件打包进了分包。2、app.config.js 添加文件路径。1、新建分包moduleA。

【转载】Vue打包后Echarts图表不显示问题解决

非晓为骁的博客

02-21

3337

原文链接：https://blog.csdn.net/yyz_1987/article/details/119903964 工作中刚好碰到的问题，然后找到这篇文章，这篇文章是转载的。最近发现一奇怪问题，正常本机测试情况下，echarts图表显示的没问题。但是只要打包后部署到nginx里，第一次首页加载没问题，但进入其他tab页面再返回首页时，echarts图表就是显示不出来了。监测控制台也没有任何的错误输出。网上有很多的说辞和办法，但试过了都没有效果。最后经过不断的尝试摸索，终于解决啦。有的说是生命

vue3+ts+vite项目使用echarts打包后图表不显示

flhhly的博客

06-25

1102

echarts打包后图表不显示

在Vue中使用Echarts实例图的方法实例

10-14

主要给大家介绍了关于如何在Vue中使用Echarts实例图的相关资料，文中介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

vue-echarts可视化模板

06-04

在 Vue 中使用 Echarts，首先需要安装相关的依赖。你可以通过 npm 或 yarn 来进行安装： ```bash npm install echarts vue-echarts --save # 或者 yarn add echarts vue-echarts ``` 安装完成后，你需要在 Vue ...

基于Vue 3+ Vite+Vue-Router 4+Element-Plus+Echarts+Axios 开发的后台管理系统

06-14

基于Vue 3+ Vite+Vue-Router 4+Element-Plus+Echarts+Axios 开发的后台管理系统项目经过严格测试，确保可以运行！基于 Spring Boot 和 Vue 以及相关技术栈开发。前台商城系统包含首页门户、商品分类、新品上线、...

Vue使用echarts(完整版，解决各种报错)

热门推荐

geidongdong的博客

01-18

13万+

前言：Echarts，它是一个与框架无关的 JS 图表库，但是它基于Js，只要是基于JS、TS的框架基本都能使用它，例如Vue，估计IONIC也能用。这一节主要将Vue如何使用echarts，并且包含各种错误解决方法。

vue项目引入echarts后执行build报错

05-15

1610

问题: vue项目引入echarts后执行npm run dev没有问题，但执行npm run build报错，具体报错信息如下图：原因: 依赖resize-detector,而在./node_modules/resize-detector/esm/index.js中包含es6语法，babel并未对其进行编译成es5语法，所以才有此错误解决办法: 修改webpac...

iview-admin 引用 vue-echarts-v3 打包报错的问题

此去经年

05-17

1204

根据vue-echarts-v3 打包 { test: /\.js$/, loader: 'babel-loader', include: [resolve('src'), resolve('test'), resolve('node_modules/vue-echarts-v3/src')] } 然而这样使用打包会报错。 ...

vue3 echarts报错

weixin_40283749的博客

01-18

2546

barPolar.js:63 Uncaught TypeError: Cannot read properties of undefined (reading 'type') util.js:406 Uncaught Error: `resize` should not be called during main process. vue版本3.0 echarts5.2 窗口发生变化调用echarts控制台会报上面2个错误错误原因 vue3中使用proxy的方式监听响应式，this.chart

vue项目使用echarts，装包错误

weixin_43775306的博客

04-23

4218

vue项目使用echarts，装包错误错误描述查找问题继续解决解决方法错误描述在vue项目中，使用了echarts做图表，上传代码后，使用git拉取下来，执行npm i 转包，查找问题发现有package.json文件中有vue-echarts 也可以通过npm echarts -v查到版本号运行，出现错误提示如下把echarts卸载再重新安装，还是失败，没有装到node mo...

vue-echarts的使用及编译报错解决方法

weixin_30838873的博客

11-14

1974

一、使用 vue-cli 快速构建vue项目，引入vue-echarts组件安装：　　> npm i vue-echarts --save 修改 webpack.config.js 配置： { test: /\.js$/, loader: 'babel-loader', include: [ resolve('src'), ...

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

追梦猪的博客

12-04

725

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

pyinstaller打包pyecharts报错解决

u013586693的博客

11-02

1889

通过 Dockerfile 创建镜像时，发现打包 pyecharts 库后运行报错，遂查询了一下，发现官方并没有支持这个库的打包，只能我自己动手了。打包好的程序直接运行的话会报 FileNotFoundError： FileNotFoundError: [Errno 2] No such file or directory: 'C:\\Users\\x\\AppData\\Local\\Temp\\_MEI6362\\pyecharts\\datasets\\map_filename.json' 查询了

react-native-echarts打包的时候报错问题解决

wyw223的博客

12-24

1018

react-native-echarts是通过 WebView 在移动端使用 Echarts 前端数据可视化库，很强大， https://github.com/somonus/react-native-echarts 一个月以前做的时候，发现这个库作者不维护了，，于是用的别的库，react-native-secharts,victory-native, react-native-chart-ki...

vue3中使用vue-echarts

“相关推荐”对你有帮助么？

非常没帮助
没帮助
一般
有帮助
非常有帮助

提交