You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

如何将Unity WebGL项目部署至自有网站(解决localhost链接导致iframe无法使用问题)

解决Unity WebGL项目部署到自建网站的iframe跳转问题

嘿,我遇到过这个问题!Unity WebGL默认的本地测试设置确实会搞出强制跳转到localhost的幺蛾子,直接导致iframe没法正常工作。别担心,按下面的步骤来就能搞定:

1. 修改Unity项目的跳转逻辑,禁用localhost强制跳转

  • 打开你的Unity项目,进入File > Build Settings,选中WebGL平台后点击Player Settings按钮。
  • 在弹出的Player Settings面板里,切换到Resolution and Presentation标签页,找到WebGL Template选项。如果你用的是默认模板,要么改成自定义模板,要么直接去编辑默认模板的代码文件。
  • 默认模板的index.html一般在项目的Assets/WebGLTemplates/Default目录下,打开这个文件后,找类似这样的跳转脚本:
// 类似这样的代码会强制跳转到localhost
if (!window.location.origin.includes('localhost')) {
    window.location.href = 'http://localhost:8080';
}
  • 直接把这段代码删掉或者用/* */注释掉,这样项目就不会再强制跳转到localhost了。

2. 重新构建WebGL项目

  • 回到Build Settings面板,点击Build按钮,选择一个本地文件夹作为输出目录,等待Unity完成构建。
  • 构建完成后,输出文件夹里会有index.htmlBuild文件夹和TemplateData文件夹,这些就是你要上传到自己网站的全部文件。

3. 上传到网站服务器并嵌入iframe

  • 把构建好的所有文件上传到你的网站服务器的某个目录,比如/assets/my-unity-game/(具体路径根据你的服务器结构调整)。
  • 在你想要嵌入游戏的网页里,添加iframe标签,示例代码如下:
<iframe 
    src="/assets/my-unity-game/index.html" 
    width="100%" 
    height="600px" 
    frameborder="0" 
    allowfullscreen
></iframe>
  • 额外注意:WebGL需要服务器支持application/wasm这个MIME类型,大部分主流主机服务商默认都支持,但如果遇到游戏加载失败的情况,需要在服务器配置里添加对应的MIME类型:
    • 如果你用Apache服务器,在.htaccess文件里添加:
      AddType application/wasm .wasm
      
    • 如果你用Nginx服务器,在配置文件里添加:
      types {
          application/wasm wasm;
      }
      

4. 测试部署效果

  • 上传完成后,访问你的网站页面,检查iframe里的游戏是否正常加载、没有跳转问题。如果还是有异常,打开浏览器开发者工具(按F12)查看控制台的错误信息,排查是否是文件路径错误或者服务器配置问题。

内容的提问来源于stack exchange,提问作者Evan Alex Karambelas

火山引擎 最新活动