PixiJS加载JSON精灵表失败：JSON.parse异常字符问题排查

可能的故障原因 #

• 服务器返回非JSON内容：开发服务器找不到目标JSON文件时，通常会返回HTML格式的404错误页面，此时JSON.parse解析开头的<字符就会抛出语法错误，这是最常见的原因。
• 静态资源路径配置错误：React开发环境中，只有public目录下的文件会被当作静态资源直接暴露，若JSON文件放在src或其他未配置的目录，服务器无法正确定位并返回文件。
• JSON文件编码异常：若文件采用UTF-8 with BOM编码，开头的隐藏BOM字符会被JSON.parse识别为非法字符，导致解析失败。
• 构建工具路径解析冲突：Webpack等构建工具对相对路径的解析规则和PixiJS Loader的路径规则不一致，导致实际请求的路径错误。

对应的解决办法 #

• 修正文件存放位置：将playerSpritesheet.json及关联的精灵图移动到项目根目录的public/sprites/文件夹下，确保静态资源能被服务器正确访问。
• 验证请求路径有效性：在浏览器地址栏直接访问http://localhost:3004/sprites/playerSpritesheet.json，确认返回的是纯JSON内容。如果返回404或HTML，说明路径有误，需调整加载路径。
• 统一文件编码：用VS Code等编辑器打开JSON文件，点击右下角的编码标识，选择UTF-8（不要带BOM），保存后重新测试。
• 使用绝对路径加载资源：在Game.jsx的createPlayerAnimatedSprite函数中，将加载路径改为绝对路径：

  loader.load('/sprites/playerSpritesheet.json')
  

  避免相对路径带来的解析歧义。
• 清除浏览器缓存：按Ctrl+Shift+R强制刷新页面，清除之前缓存的错误响应，确保请求最新的文件内容。
• 检查Webpack配置（自定义场景）：如果手动配置了Webpack，确保module.rules中包含JSON文件的处理规则：

  module.exports = {
    module: {
      rules: [
        { test: /\.json$/, type: 'json' }
      ]
    }
  }
  

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