Vue 3执行vue serve后页面空白问题求助

看起来你遇到的问题主要出在两个地方：插件注册时机错误，以及可能使用了不兼容Vue 3的库。下面一步步帮你解决：

1. 修正main.js中的插件注册顺序 #

你的代码里先执行了mount('#app')，再调用app.use(Embed)——但Vue 3中，插件必须在应用挂载前注册，否则不会生效。正确的写法应该是：

import { createApp } from 'vue'
import App from './App.vue'
import Embed from 'v-video-embed'

const app = createApp(App)
// 先注册插件
app.use(Embed)
// 再挂载应用
app.mount('#app')

这是因为createApp(App).mount('#app')会直接返回已挂载的应用实例，此时再注册插件已经来不及初始化，组件自然无法被识别，导致页面空白。

2. 确认v-video-embed是否支持Vue 3 #

这个库目前只支持Vue 2版本，并不兼容Vue 3——这也是你即使修正顺序后可能依然无法正常工作的核心原因。

替代方案：使用Vue 3兼容的视频嵌入库 #

推荐几个实用的替代选项：

• vue3-video-play：功能全面的视频播放组件，支持主流视频平台嵌入和本地视频播放
• @techassi/vue-youtube-embed：专门针对YouTube的Vue 3嵌入组件
• 需求简单的话，也可以直接用原生iframe嵌入，比如YouTube的嵌入代码：

  <iframe width="560" height="315" src="https://www.youtube.com/embed/s4ObxcdXoFE" title="YouTube video player" frameborder="0" allowfullscreen></iframe>
  

验证步骤 #

1. 先修正main.js的代码顺序，重启项目观察页面变化
2. 如果问题仍存在，卸载v-video-embed，安装上述Vue 3兼容库并按文档配置使用

这样应该就能解决你页面空白的问题了。

内容的提问来源于stack exchange，提问作者thecode