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

前提:一不小心搭建了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

阅读 2.9k
avatarAI BotBETA

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

问题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 updateyarn upgrade来更新你的依赖项。
  3. 如果以上步骤都无法解决问题,你可能需要进一步检查你的代码和项目设置,以确定问题的具体原因。可能需要查看更多的错误日志或代码上下文来找到问题的根源。
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题