Angular应用Firebase托管Unity WebGL报Unexpected token <错误求助

我之前帮不少开发者解决过类似的Angular整合Unity WebGL部署到Firebase的问题，你遇到的Unexpected token <错误确实是Firebase Hosting的重写规则导致的——Firebase会默认把所有未匹配到静态资源的请求导向Angular的index.html，包括Unity加载Blob资源时的请求，这就导致UnityLoader拿到的是HTML文件而非预期的JS资源，自然会抛出语法错误。

下面是具体的解决方案步骤：

1. 修改Firebase Hosting的重写规则 #

打开项目根目录的firebase.json文件，调整hosting下的rewrites配置，优先让Unity WebGL的资源路径绕过Angular的重写。具体配置示例如下：

{
  "hosting": {
    "public": "dist/your-angular-project-name",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      // 先匹配Unity WebGL的资源路径，直接返回对应文件
      {
        "source": "/assets/webgl/**",
        "destination": "/assets/webgl/$1"
      },
      // 再处理Angular的单页应用重写
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

这个配置会让所有指向/assets/webgl/下的资源请求直接返回文件，不会被重定向到Angular的index.html。

2. 验证Unity WebGL的资源路径配置 #

打开Unity导出的WebGL包中的index.html，检查UnityLoader的初始化代码，确保dataUrl、frameworkUrl、codeUrl等路径是相对路径或者正确指向/assets/webgl/下的文件。比如：

var unityInstance = UnityLoader.instantiate("unityContainer", "/assets/webgl/Build/YourProjectName.json", {onProgress: UnityProgress});

避免使用绝对路径或者错误的相对路径，确保Firebase能正确找到这些静态资源。

3. 清理缓存并重新部署 #

• 部署时使用firebase deploy --only hosting --force命令，强制清除Firebase的缓存，确保新的重写规则生效。
• 在Chrome浏览器中打开开发者工具（F12），勾选"Disable cache"选项，或者使用隐身模式测试，避免本地缓存影响结果。

完成以上步骤后，Unity WebGL应该就能正常通过iframe加载了。

内容的提问来源于stack exchange，提问作者LETOURNEUR Léo