javascript - vue3项目中使用vue-pdf 报错TypeError: h is not a function 报错Vue is not a constructor？

Question

前提：一不小心搭建了vue3项目，vue-pdf最新版本为4.2.0，不是针对vue3构建的
问题1：TypeError: h is not a function

原因：h在vue3的render函数中不再以参数形式出现，需要手动导入
解决：将vue-pdf中的render: function (h)替换为render: function ()，
然后手动导入import { h } from 'vue'
在vue-pdf的依赖vue-resize-sensor中同样将render: function(create)替换为render: function()，
然后手动导入import { h as create } from 'vue'
问题2：ReferenceError: $emit is not defined

解决：npm install vue-happy-bus --save，
然后手动导入import { $on, $emit } from 'vue-happy-bus'. 
this.$on替换为$on，this.$emit替换为$emit
问题3：修改了vue-pdf和vue-resize-sensor中的源码如何上传到自己的项目
解决：npm install patch-package --save-dev，
npx patch-package vue-pdf
npx patch-package vue-resize-sensor
修改package.json
"scripts": {

"serve": "vue-cli-service serve","build": "vue-cli-service build","lint": "vue-cli-service lint","postinstall": "patch-package"//增加这个命令

},
遗留问题：引入vue-happy-bus报错Vue is not a constructor

Answer 1

https://segmentfault.com/a/1190000039858927

Answer 2

根据你提供的问题，我可以为你提供一些可能的解决方案。

问题1：TypeError: h is not a function

在Vue 3中，h函数不再作为参数传递给渲染函数。你需要手动导入它。

解决方案：

1. 替换vue-pdf中的render: function (h)为render: function ()。
2. 手动导入import { h } from 'vue'。
3. 在vue-pdf的依赖vue-resize-sensor中，同样将render: function(create)替换为render: function()。
4. 手动导入import { h as create } from 'vue'。

问题2：ReferenceError: $emit is not defined

解决方案：

1. 运行npm install vue-happy-bus --save来安装vue-happy-bus。
2. 手动导入import { $on, $emit } from 'vue-happy-bus'。
3. 将this.$on替换为$on，将this.$emit替换为$emit。

问题3：如何上传修改后的vue-pdf和vue-resize-sensor源码到自己的项目？

解决方案：

1. 运行npm install patch-package --save-dev来安装patch-package。
2. 运行npx patch-package vue-pdf来为vue-pdf创建补丁。
3. 运行npx patch-package vue-resize-sensor来为vue-resize-sensor创建补丁。
4. 修改你的package.json文件，添加一个新的命令"postinstall": "patch-package"，这将使得补丁在项目安装完成后自动应用。

遗留问题：引入vue-happy-bus报错Vue is not a constructor

这个问题可能是由于在执行某行代码时，Vue的构造函数尚未准备好或者被正确地引用。可能的原因有很多，包括但不限于脚本加载顺序问题、Vue版本不兼容等。为了解决这个问题，你可以尝试以下步骤：

1. 确保Vue库正确引入并初始化。你可以通过在你的代码中添加一个引用到Vue的声明或简单的初始化Vue实例的代码来检查这一点。例如：

   import { createApp } from 'vue';const app = createApp({}); // 创建一个新的Vue应用实例app.component('my-component', { /*...*/ }); // 注册一个全局组件（可选）app.mount('#app'); // 挂载应用到id为'app'的DOM元素（可选）

2. 检查你的依赖项是否都正确安装并更新到最新版本。有时，依赖项之间的版本冲突可能会导致此类问题。你可以通过运行npm update或yarn upgrade来更新你的依赖项。
3. 如果以上步骤都无法解决问题，你可能需要进一步检查你的代码和项目设置，以确定问题的具体原因。可能需要查看更多的错误日志或代码上下文来找到问题的根源。