在 vue.js 文件中导入音频 .wav 文件时出现错误答案

【问题标题】：I have a error when audio .wav file import in vue.js file在 vue.js 文件中导入音频 .wav 文件时出现错误
【发布时间】：2021-10-03 19:18:26
【问题描述】：

当我导入音频文件并保存 vue 文件时。编译后显示这个错误

模块解析失败：意外字符 '�' (1:4)
您可能需要适当的加载程序来处理此文件类型，目前没有配置加载程序来处理此文件。见https://webpack.js.org/concepts#loaders
（此二进制文件的源代码省略）

这是我导入的代码

var audio = new Audio(require('@/assets/files/wrong-answer-sound.wav')) // path to file
    audio.play()

【问题讨论】：

【解决方案1】：

这是 Laravel vue.js 项目。所以音频文件不是运行时文件，这就是我必须将音频文件保存在 Laravel 公用文件夹中的原因。然后我必须像这样使用它。我在vue文件中使用下面的代码

var audio = new Audio('/correct.mp3') // path to file
audio.play()

效果很好

【讨论】：

【解决方案2】：

尝试在你的页面上制作一个 html 标签

<audio src="@/assets/files/wrong-answer-sound.wav"></audio>

然后在您的代码中激活它。将此标签与ref 或document.querySelector 如果您需要动态音频，您可以使用计算源执行此操作，并将变量或计算属性传递给音频标签中的src 属性

【讨论】：