如何将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.html、Build文件夹和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; }
- 如果你用Apache服务器,在
4. 测试部署效果
- 上传完成后,访问你的网站页面,检查iframe里的游戏是否正常加载、没有跳转问题。如果还是有异常,打开浏览器开发者工具(按F12)查看控制台的错误信息,排查是否是文件路径错误或者服务器配置问题。
内容的提问来源于stack exchange,提问作者Evan Alex Karambelas




