Vue模板中动态绑定变量实现音频播放失败的问题求助

问题核心：Vue项目中，模板里直接写的静态资源路径会被Vite/Webpack这类打包工具自动解析处理，但通过变量绑定的相对路径不会被打包工具识别，导致浏览器请求的资源路径错误，音频无法加载。

解决方案 #

根据你使用的打包工具，选择以下任意一种方法处理资源路径：

方法1：适合Vite项目

利用new URL结合import.meta.url，让打包工具正确解析资源路径：

<script setup>
import { ref } from 'vue'
import data from '../../../data/game3/data2.json'

// 从JSON中取出相对路径，基于当前组件文件位置生成可访问的URL
const rawAudioPath = data.categories[0].units[0].items[0].pronunciation
const music = ref(new URL(rawAudioPath, import.meta.url).href)
</script>

<template>
  <div>
    {{ music }}
    <audio controls>
      <source :src="music" type="audio/mp3" />
    </audio>
  </div>
</template>

方法2：适合Webpack项目（如Vue CLI创建的项目）

使用require加载资源，让Webpack解析并处理路径：

<script setup>
import { ref } from 'vue'
import data from '../../../data/game3/data2.json'

const rawAudioPath = data.categories[0].units[0].items[0].pronunciation
// 注意调整路径前缀，确保require能正确找到资源
const music = ref(require(`../${rawAudioPath}`).default)
</script>

<template>
  <div>
    {{ music }}
    <audio controls>
      <source :src="music" type="audio/mp3" />
    </audio>
  </div>
</template>

原理说明 #

打包工具会将assets目录下的资源编译到输出目录，并生成带哈希的正确路径。直接用字符串变量绑定路径时，打包工具不会对其进行解析，浏览器会直接请求你写的原始相对路径，导致资源找不到。而new URL（Vite）或require（Webpack）会让打包工具提前解析资源路径，生成浏览器可访问的正确URL。

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