部署后无法加载public文件夹中音效资源问题求助

问题原因 #

你部署的是GitHub Pages项目站点，站点根路径并非域名根目录/，而是/Documentation-Wizard/。之前的两种路径写法都没适配这个基础路径：

• 第一种写法/public/Success.wav：create-react-app部署时，public文件夹内的资源会直接输出到站点根目录，不存在/public/这个子路径，导致请求无效。
• 第二种写法/Success.wav：会直接请求域名根目录下的文件，即https://syntaxwarrior30.github.io/Success.wav，但你的资源实际在https://syntaxwarrior30.github.io/Documentation-Wizard/Success.wav，所以返回404。

两种可行解决方案 #

方案1：直接指定项目路径前缀 #

修改DocsGen.jsx中的音频路径：

const successAudio = new Audio('/Documentation-Wizard/Success.wav');
const errorAudio = new Audio('/Documentation-Wizard/Error.wav');

方案2：使用环境变量适配不同部署环境（推荐） #

利用create-react-app提供的PUBLIC_URL环境变量，它会自动适配部署的基础路径，本地开发和部署环境都能正常工作：

const successAudio = new Audio(`${process.env.PUBLIC_URL}/Success.wav`);
const errorAudio = new Audio(`${process.env.PUBLIC_URL}/Error.wav`);

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