Nuxt中如何按条件加载媒体？桌面端视频加载问题求助

你的问题出在require的编译时机上：webpack会在编译阶段处理require('~/assets/video/intro.mp4')，不管运行时的$mq条件是否满足，它都会把这个视频打包到输出目录，浏览器也会尝试加载它——哪怕最终src被设置为空字符串，编译阶段已经标记了这个资源需要加载。

下面是几个可行的解决方案：

方案1：用v-if完全控制元素渲染 #

直接通过v-if判断断点，只有非移动端才渲染video标签，移动端不会生成该元素，自然不会加载视频：

<video v-if="$mq !== 'mobile'" :src="require('~/assets/video/intro.mp4')" />

这个方法最直接，也最不容易出问题，能从根源上避免移动端加载不必要的资源。

方案2：动态绑定路径而非编译时引入 #

如果不想移除video标签，而是动态控制资源加载，可以把视频路径作为字符串传入，跳过webpack的编译时引入：

<video :src="$mq !== 'mobile' ? '/_nuxt/assets/video/intro.mp4' : ''" />

注意：Nuxt编译后assets目录下的资源路径会变成/_nuxt/assets/...，如果是Nuxt 3，路径可能略有不同，可以查看编译后的实际资源路径调整。

方案3：结合client-only处理SSR场景 #

如果你的项目是服务端渲染（SSR）模式，vue-mq在服务端无法获取浏览器的视口信息，断点判断可能不准确。这时用client-only组件包裹，确保判断逻辑只在客户端执行：

<client-only>
  <video v-if="$mq !== 'mobile'" :src="require('~/assets/video/intro.mp4')" />
</client-only>

这样服务端不会渲染该视频标签，客户端渲染时才会根据当前视口的断点决定是否加载。

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