React开发SCORM包上传SCORM Cloud出现404资源加载错误如何解决？

你遇到的报错绝大多数为路径配置问题，可按以下顺序逐一排查修复：

1. 修正React项目公共路径配置 #

create-react-app默认生成的打包产物，所有静态资源引用路径为绝对根路径，而SCORM Cloud会将每个上传的SCORM包部署在独立子路径下，绝对路径无法匹配子路径下的资源地址。
修复方式：
在项目package.json中新增配置项：

"homepage": "."

配置完成后重新执行npm run build生成新的生产构建产物。

2. 校验simple-scorm-packager配置 #

检查scoPackager.js配置文件的核心字段是否符合要求：

• source字段：必须指向React构建生成的build文件夹路径，不可指向项目根目录
• launchPage字段：必须填写构建产物内的启动页文件名，通常为index.html，注意服务器对文件名大小写敏感
• scormVersion字段：需和你后续在SCORM Cloud导入时选择的版本保持一致

3. 校验SCORM包目录结构 #

将生成的SCORM压缩包本地解压，确认目录结构符合规范：

• 压缩包根目录必须直接存在imsmanifest.xml文件，不可嵌套在子文件夹内
• 根目录下需直接存放启动页index.html、static资源文件夹等构建产物，不可将所有内容都放在build子目录下
  如果结构不符合要求，调整配置后重新打包即可。

4. 修正硬编码的绝对路径引用 #

检查项目代码中是否存在硬编码的绝对路径引用的静态资源（如图片、字体、自定义JS文件等），全部修改为相对路径引用，避免部署到子路径后无法寻址。

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