PixiJS加载spritesheet时spritesheet属性为undefined，误加载index.html问题

你遇到的问题是vue-cli资源加载规则和PixiJS Loader传参规则不匹配导致的：

• vue-cli中require('../assets/spritesheet.json')会直接返回解析后的JSON对象，不是JSON文件的访问路径
• PIXI.Loader的add方法第二个参数需要传入资源URL，你传入JSON对象后Loader无法识别，会当成无效路径发起请求，项目的单页路由 fallback 规则就把无效路径请求重定向到了index.html，所以返回的data字段是首页源码。

提供两种可直接落地的修复方案：

方案一：手动构造Spritesheet（推荐，无需调整文件目录） #

你已经可以通过require直接拿到JSON内容，直接绕过Loader加载步骤即可：

// 引入精灵表配置和对应的精灵图资源
import spritesheetJson from '../assets/spritesheet.json'
// 替换为你自己的精灵图路径
import spritesheetImg from '../assets/spritesheet.png'

// 加载精灵图纹理
const baseTexture = PIXI.Texture.from(spritesheetImg).baseTexture
// 实例化精灵表
const sheet = new PIXI.Spritesheet(baseTexture, spritesheetJson)
// 解析精灵表
sheet.parse(() => {
  // 解析完成后即可正常使用所有帧纹理
  console.log('精灵表加载完成', sheet)
  const testSprite = new PIXI.Sprite(sheet.textures['替换为你的帧名.png'])
})

方案二：使用PIXI.Loader加载（需要调整资源存放位置） #

如果需要沿用Loader的加载逻辑，按以下步骤调整：

1. 把spritesheet.json和对应的精灵图文件移动到项目public/assets目录下（没有assets文件夹就新建）
2. 调整spritesheet.json中meta.image字段的值为精灵图的公共路径，比如/assets/spritesheet.png
3. 加载代码改为直接传公共路径，不要用require：

PIXI.Loader.shared.add('sheet', '/assets/spritesheet.json').load(spriteSetup)

function spriteSetup() {
    let sheet = PIXI.Loader.shared.resources['sheet'].spritesheet;
    console.log(sheet)
}

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