vue3+cli 引入vue-pdf 报错 h.i

在 Vue3+CLI 中使用 `vue-pdf`，需要注意以下几点：

1. 安装 `vue-pdf`

使用 npm 或 yarn 安装 `vue-pdf`：

npm install vue-pdf

2. 引入 `vue-pdf`

在需要使用 `vue-pdf` 的组件中，引入 `vue-pdf`：

import { pdf } from 'vue-pdf'

3. 注册 `vue-pdf` 组件

在 Vue3 中，需要使用 `defineComponent` 方法来注册组件，同时需要注意组件的命名方式，需要使用驼峰命名法：

import { defineComponent } from 'vue'
import { pdf } from 'vue-pdf'

export default defineComponent({
  name: 'PdfViewer',
  components: {
    pdf
  },
  data() {
    return {
      pdfUrl: 'https://pdftron.s3.amazonaws.com/downloads/pl/webviewer-demo.pdf'
    }
  }
})

4. 在模板中使用 `vue-pdf`

在模板中使用 `vue-pdf` 组件，并传递 PDF 文件的 URL 属性：

<template>
  <div>
    <pdf :src="pdfUrl"></pdf>
  </div>
</template>

如果你在使用 `vue-pdf` 时遇到了 `h.i` 报错，可以试着在组件中添加 `v-if` 判断，等待 PDF 文件加载完毕再渲染组件：

<template>
  <div>
    <div v-if="pdfLoaded">
      <pdf :src="pdfUrl"></pdf>
    </div>
  </div>
</template>

<script>
import { defineComponent } from 'vue'
import { pdf } from 'vue-pdf'

export default defineComponent({
  name: 'PdfViewer',
  components: {
    pdf
  },
  data() {
    return {
      pdfUrl: 'https://pdftron.s3.amazonaws.com/downloads/pl/webviewer-demo.pdf',
      pdfLoaded: false
    }
  },
  methods: {
    handleLoad() {
      this.pdfLoaded = true
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.$refs.pdfViewer.$el.addEventListener('pagesinit', this.handleLoad)
    })
  },
  beforeUnmount() {
    this.$refs.pdfViewer.$el.removeEventListener('pagesinit', this.handleLoad)
  }
})
</script>

在上面的代码中，我们使用 `v-if` 判断 PDF 文件是否加载完毕，如果加载完毕再渲染 `vue-pdf` 组件。同时，在组件的 `mounted` 和 `beforeUnmount` 生命周期中，监听 `pagesinit` 事件，当 PDF 文件加载完毕时，修改 `pdfLoaded` 的值。