ReactJS应用中音频文件相对路径无效，如何正确配置路径？

我开发了一个从songsdata读取歌曲的音频播放器，相关代码如下：

AudioPlayer.js #

const AudioPlayer = () => {
  const [songs, setSongs] = useState(songsdata);
  const [currentSong, setCurrentSong] = useState(songsdata[0]);

  return (
  <div className="AudioPlayer">
      <audio src={currentSong.url} />
      <Player songs={songs} setSongs={setSongs} currentSong={currentSong} />
  </div>
  );
}

Audio.js #

exports.songsdata = [
{
    "title": "Song 1",
    "url": "../../assets/song1.mp3"
},
{
    "title": "Song 2",
    "url": "../../assets/song2.mp3"
}
]

我尝试使用相对路径../../assets/指向音频文件，但出现404错误。图片和视频的相对路径可正常使用，但音频的相对路径无效。另外，构建应用后会生成static/media文件夹，其中包含图片和视频，但没有音频文件。请问该如何设置正确的URL路径？为何音频文件未进入static/media文件夹？

一、音频没进static/media的原因 #

在React（尤其是Create React App）这类打包项目里，webpack只会处理代码里通过import/require主动引用的资源，把它们打包到static/media目录。图片和视频能正常进入，肯定是你在代码里用import/require引入过它们；但音频只是在配置文件里写了路径，没被代码主动引用，webpack识别不到这是项目依赖，自然不会把它们打包进去。

二、正确的路径设置方法 #

有两种靠谱的解决方式：

方式1：用import引入音频文件 #

直接在配置文件或组件里引入音频，让webpack自动处理路径和打包：

修改Audio.js：

import song1 from '../../assets/song1.mp3';
import song2 from '../../assets/song2.mp3';

exports.songsdata = [
{
    "title": "Song 1",
    "url": song1
},
{
    "title": "Song 2",
    "url": song2
}
]

这种方式下，webpack会给音频文件加上哈希后缀，打包到static/media，song1、song2变量直接对应打包后的正确URL，不用手动管路径问题。

方式2：把音频放到public目录 #

如果不想用import，可以把音频文件移到项目根目录的public文件夹下（比如public/assets/song1.mp3），然后用绝对路径：

修改Audio.js：

exports.songsdata = [
{
    "title": "Song 1",
    "url": "/assets/song1.mp3"
},
{
    "title": "Song 2",
    "url": "/assets/song2.mp3"
}
]

这里路径开头的/表示从public目录根开始，构建时这些文件会直接复制到产物目录，不会被webpack修改文件名，适合需要保持原文件名的场景。

补充提醒 #

• 两种方式二选一就行，要缓存优化选方式1，要保持文件名选方式2。
• 先确认音频文件确实在你指定的目录里，别因为文件放错位置导致404。

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