vue3 vite 使用音频播放 打包上线可用

项目开发阶段

渲染层加上这条语句

 <audio controls="controls" hidden :src="warning_play_audio" ref="audio"></audio>

js定义一个响应式的变量

  const warning_play_audio= ref("../../src/assets/warning_play_audio.wav");

这里补充一句，之前调用audio老是失败，后来发现文件路径有问题，所以用了…/…/src
定义一个函数，函数里调用 audio.value.play();

  const warning_audio = ()=>{ 
  audio.value.play();
};

要播放这段语音，div绑定一下这个函数就可以了

项目打包阶段

项目打包后，音频无法播放
搜了一些博客，发现使用import动态引入静态资源如音频等，可以正常播放音频

渲染层不变，js的变量定义需要变一下

import warning_play_audio111 from '../../src/assets/warning_play_audio.wav';
 const warning_play_audio= ref(warning_play_audio111);