我在 Nuxt3 项目中使用的 youtube-vue3 插件有问题。这导致我在纱线生成上出现预渲染问题。这是它的样子:
<Youtube
:width="width"
:height="height"
:videoid="videoId"
:controls="1"
:autoplay="1"
/>
import { YoutubeVue3 as Youtube } from 'youtube-vue3'
纱线生成错误:
` ERROR Named export 'YoutubeVue3' not found. The requested module 'file:///Users/elmir/Desktop/projects/ecomail-web/node_modules/youtube-vue3/dist/youtube-vue3.common.js' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:
import pkg from 'file:///Users/elmir/Desktop/projects/ecomail-web/node_modules/youtube-vue3/dist/youtube-vue3.common.js';
const { YoutubeVue3 } = pkg;
import { YoutubeVue3 } from 'node_modules/youtube-vue3/dist/youtube-vue3.common.js';
^^^^^^^^^^^
SyntaxError: Named export 'YoutubeVue3' not found. The requested module 'node_modules/youtube-vue3/dist/youtube-vue3.common.js' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:
import pkg from 'node_modules/youtube-vue3/dist/youtube-vue3.common.js';
const { YoutubeVue3 } = pkg;
at ModuleJob._instantiate (node:internal/modules/esm/module_job:124:21)
at async ModuleJob.run (node:internal/modules/esm/module_job:190:5)`
我尝试在 nuxt.config.ts 中的构建转换上添加此插件,而不是选项。然后我尝试使用别名,也不是一个选项。我还阅读并遵循了 Nuxt 页面上有关 ES 模块的说明,但没有意义。解决办法是什么?谢谢你
这是如何在 Nuxt 3 中使用它的基本示例
npm i vue3-youtube
~/plugins/loading-youtube.client.ts
import Youtube from 'vue3-youtube'
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.component('Youtube-Component', Youtube)
})
在您的组件或页面中,确保用
Youtube-Component
组件包裹 ClientOnly
。
<script lang="ts" setup>
</script>
<template>
<div>
<ClientOnly>
<Youtube-Component src="https://www.youtube.com/watch?v=y6ulxSMYf40" />
</ClientOnly>
</div>
</template>
按照此示例,您应该能够在您的页面上看到它。