Google AI Studio 部署 Bug 排查：index.html 缺失入口文件引用导致的坑
/ 3 min read
Table of Contents
今天用 Google AI Studio 创建应用时遇到了一个奇怪的 bug（可能后续会被修复），这里记录一下排查过程，希望能帮到遇到同样问题的开发者。
问题重现
Google AI Studio 创建的项目默认使用 React Vite 框架，但我发现它生成的代码里有个问题：index.html 文件的 <body> 标签内缺少了对 index.tsx 入口文件的引用。
奇怪的是，尽管缺少这个关键引用，AI Studio 内置的预览功能却完全正常，页面能正常渲染，所以我一开始根本没注意到这个问题。
部署失败
我直接通过 AI Studio 右上角的保存功能将项目同步到 GitHub，然后在 Cloudflare Pages 中部署。结果部署完成后，页面一片空白，完全无法访问。
查看 Cloudflare Pages 的部署日志，我发现构建过程只打包了 2 个 modules，这显然不对劲——一个正常的 React Vite 项目至少会有多个模块。
本地测试与原因分析
为了排查问题，我将 AI Studio 中的代码下载到本地。令人困惑的是，本地构建和预览都完全正常，没有任何报错。
经过和 Gemini 探讨，我终于发现了问题所在：AI Studio 在线编辑器中的 index.html 文件确实没有入口文件引用，但下载到本地的代码却自动添加了那行缺失的 <script> 标签！
这个差异解释了为什么在线预览和本地测试都没问题，但部署到 Cloudflare Pages 就失败了——因为直接从 AI Studio 同步到 GitHub 的代码仍然缺少入口文件引用。
解决方案
解决方法其实很简单：在 AI Studio 中手动检查并添加缺失的入口文件引用，或者先下载代码到本地，确认 index.html 中包含正确的 <script> 标签后，再部署到 GitHub 和 Cloudflare Pages。
这个 bug 给我提了个醒，即使在线工具的预览功能正常，也应该仔细检查生成的代码结构，特别是关键的入口文件引用部分，避免在部署时遇到意外问题。