![image](https://developer.qcloudimg.com/http-save/yehe-1209475/21b07799501d203d7127359e0936b5f5.png)

## 前言

你好，我是喵喵侠，是一名前端开发。

公司最近有个 Vue 2 的老项目需要维护，里面用到了 ECharts 图表，我是通过 `vue-echarts`​ 这个封装库来实现的。稍微了解过这个库的朋友应该知道，`vue-echarts`​ 从 v6 版本开始就全面拥抱 Vue 3 了，只有 `6.7.3` 及以下的版本才勉强支持 Vue 2。

虽然我知道这个版本限制，特意锁定了 `6.7.3`​ 版本，但在启动项目访问页面时，控制台还是无情地报了个错：`TypeError: Object(...) is not a function`。这就很迷了，我的组件引入写法完全没问题，依赖版本也锁死了，怎么还是跑不起来？

## 问题描述

我在 `main.js`​ 或者组件里引入了 `vue-echarts`，代码大概是这样的：

```javascript
import ECharts from 'vue-echarts'
// ...
Vue.component('v-chart', ECharts)
```

项目编译没报错，但是浏览器打开页面一片空白，控制台飘红：

```text
TypeError: Object(...) is not a function
    at eval (index.js:1:1)
    at ./node_modules/.pnpm/vue-demi@0.14.10_vue@2.7.16/node_modules/vue-demi/lib/index.mjs (app.js:...)
    ...
```

看着这个报错，第一反应是 `vue-echarts`​ 内部用的某些 Composition API（如 `defineComponent`​、`ref` 等）在我的 Vue 2 环境里没找到。

## 刨根问底

折腾了一会儿没头绪，我就去 GitHub 仓库搜 Issue，想着看看有没有倒霉蛋遇到跟我一样的问题。

结果搜到了这个：
[vue2 引入 vue-echarts@6.7.3 报错 TypeError: Object(...) is not a function 怎么解决？ · Issue #824 · ecomfe/vue-echarts](https://www.google.com/url?q=https%3A%2F%2Fgithub.com%2Fecomfe%2Fvue-echarts%2Fissues%2F824 "https://github.com/ecomfe/vue-echarts/issues/824")

点进去一看，好家伙，这不就是我以前自己提的 Issue 吗？当时解决了，现在过段时间又忘了，果然“好记性不如烂笔头”，今天必须记录下来。

其实这个问题的根源在于 `vue-demi`​。`vue-echarts`​ 依赖 `vue-demi`​ 来抹平 Vue 2 和 Vue 3 的差异。在 Vue 2.7 之前的版本，`vue-demi`​ 需要通过 `postinstall`​ 脚本来自动判断当前环境并“魔改” Vue 的原型。但如果你用的是 `pnpm`​，它的包管理机制比较严格，可能会阻止这种隐式的 `postinstall`​ 行为，导致 `vue-demi` 没能正确初始化。

## 解决方案

既然知道了是因为 `vue-demi` 的初始化脚本没执行成功，解决办法就很简单了：手动批准它执行构建脚本。

### 步骤一：执行批准命令

如果你和我一样使用的是 `pnpm`，直接在项目根目录下执行：

```bash
pnpm approve-builds
```

这条命令的作用是告诉 pnpm：“我允许这些依赖包（比如 `vue-demi`）执行它们自己的构建脚本”。执行完之后，pnpm 会重新运行相关依赖的生命周期钩子。

### 步骤二：重启项目

执行完上面的命令后，建议删除 `node_modules` 重新安装一下依赖，或者直接重启你的开发服务器：

```bash
npm run serve
```

再次刷新页面，图表应该就能正常显示了。

## 总结

在 Vue 2 项目里用那些同时兼容 Vue 3 的库（Universal Library），经常会遇到这种 `vue-demi` 相关的问题。特别是用 pnpm 的时候，因为它的权限控制更严，很容易把这种自动执行的脚本给拦截了。

下次再遇到 `Object(...) is not a function`​ 这种莫名其妙的错，不妨先检查一下是不是 `vue-demi` 没跑起来。

**标签**：Vue2, vue-echarts, ECharts, pnpm, Bug 修复
​**关键词**：vue-echarts 报错, Object is not a function, vue-demi, pnpm approve-builds, Vue2 兼容性


公司最近有个 Vue 2 的老项目需要维护，里面用到了 ECharts 图表，我是通过 vue-echarts​ 这个封装库来实现的。稍微了解过这个库的朋友应该知道，vue-echarts​ 从 v6 版本开始就全面拥抱 Vue 3 了，只有 6.7.3 及以下的版本才勉强支持 Vue 2。

vue2 引入 vue-echarts@6.7.3 报错 TypeError: Object(...) is not a function 怎么解决？

前端

解决Vue2项目中使用vue-echarts报错"Object(...)isnotafunction"问题。原因是pnpm阻止了vue-demi的postinstall脚本执行，导致Vue2兼容性问题。解决方案：执行pnpm approve-builds命令并重启项目即可修复。适用于Vue2.7以下版本与vue-echarts6.7.3的兼容性问题。

服务器

GitHub

4核4G3M云服务器 新用户低至38元/年！

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云AI代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

功能1上新10个字符

功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符。

功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符。

功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符

功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符

功能4上新

文章&问答评论现已支持表情

全新交互，全新视觉，新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能，全面提升创作效率和体验

社区富文本编辑器全新改版！诚邀体验～ 

精选全网热门MCP server，让你的AI更好用 🚀

💥开发者 MCP广场重磅上线！

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

解决Vue2项目中使用vue-echarts报错"Object(...)isnotafunction"问题。原因是pnpm阻止了vue-demi的postinstall脚本执行，导致Vue2兼容性问题。解决方案：执行pnpm approve-builds命令并重启项目即可修复。适用于Vue2.7以下版本与vue-ech...

vue2 引入 vue-echarts@6.7.3 报错 TypeError: Object(...) is not a function 怎么解决？-腾讯云开发者社区-腾讯云

vue2 引入 vue-echarts@6.7.3 报错 TypeError: Object(...) is not a function 怎么解决？

vue2 引入 vue-echarts@6.7.3 报错 TypeError: Object(...) is not a function 怎么解决？

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐