NUXT3带有YouTube的Vue -Plyr-未定义的参考错误

Question

我正在尝试实施 vue-plyr 使用新的 nuxt3 应用程序，以便我可以将自定义的YouTube和Vimeo视频嵌入到页面中。

我遵循Vue-Plyr NPM页面底部的NUXT（VUE 2.x）的说明，通过在插件中创建文件目录中的文件并将组件包装在NUXT中，并将组件包装在＆lt; clientonly＆gt;标签，但我仍然遇到错误。

/plugins/vue-plyr.ts

import VuePlyr from 'vue-plyr/dist/vue-plyr.ssr'
import 'vue-plyr/dist/vue-plyr.css'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(VuePlyr, { plyr: {} })
})

nuxt.config.ts

import { defineNuxtConfig } from 'nuxt'

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
    plugins: [
        { src: '~/plugins/vue-plyr', mode: 'client' }
    ]
})

app.vue

<template>
  <div>
    <!-- <NuxtWelcome /> -->
    <div>
        Video
        <ClientOnly>
          <vue-plyr>
            <div class="plyr__video-embed">
              <iframe
                src="https://www.youtube.com/embed/bTqVqk7FSmY?amp;iv_load_policy=3&amp;modestbranding=1&amp;playsinline=1&amp;showinfo=0&amp;rel=0&amp;enablejsapi=1"
                allowfullscreen
                allowtransparency
                allow="autoplay"
              ></iframe>
            </div>
          </vue-plyr>
        </ClientOnly>
    </div>
  </div>
</template>

<script lang="ts">

</script>

错误

ReferenceError: document is not defined
    at C:\Users\benm\Documents\Coding\My Projects\yt-test\node_modules\vue-plyr\dist\vue-plyr.ssr.js:5913:11
    at Object.<anonymous> (C:\Users\benm\Documents\Coding\My Projects\yt-test\node_modules\vue-plyr\dist\vue-plyr.ssr.js:5924:2)
    at Module._compile (internal/modules/cjs/loader.js:1063:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at ModuleWrap.<anonymous> (internal/modules/esm/translators.js:199:29)
    at ModuleJob.run (internal/modules/esm/module_job.js:152:23)
    at async Loader.import (internal/modules/esm/loader.js:166:24)
    at async __instantiateModule__ (file:///C:/Users/benm/Documents/Coding/My%20Projects/yt-test/.nuxt/dist/server/server.mjs:4156:3)

Answer 1

我找到了一种使它正常工作的方法。在您的插件文件夹中创建一个名为的文件
plyr.client.ts。一切都与.client.ts有关。将其添加为其内容：

import VuePlyr from "vue-plyr/dist/vue-plyr.ssr";

const VuePlayer = VuePlyr;

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(VuePlayer, { plyr: {} });
});

在nuxt.config.ts add：

css: ["@/assets/css/main.scss", "~/node_modules/vue-plyr/dist/vue-plyr.css"],

因此，在这里您添加了节点模块的CSS，然后可以在页面/组件中使用它：

<ClientOnly>
  <vue-plyr>
    <div class="plyr__video-embed">
    <iframe
      src="https://www.youtube.com/embed/bTqVqk7FSmY?amp;iv_load_policy=3&modestbranding=1&playsinline=1&showinfo=0&rel=0&enablejsapi=1"
      allowfullscreen
      allowtransparency
      allow="autoplay"
    ></iframe>
    </div>
  </vue-plyr>
</ClientOnly>