部署Flutter Web到App Engine后出现flutter.js 404错误求助

问题现象 #

部署Flutter Web应用到Google App Engine后，页面仅显示应用标题，计数器功能无法加载，浏览器网络面板提示flutter.js请求返回404错误，Chrome和Firefox均存在该问题。

操作回顾 #

• 执行gcloud app create创建App Engine应用
• 通过Android Studio创建基础Flutter项目
• 编写app.yaml配置文件，指定runtime: python39，后因报错移除api_version和threadsafe字段
• 执行flutter build web构建Web应用并部署成功，访问地址为https://myxyzxyz.uc.r.appspot.com

根因 #

使用Python 3 runtime时，App Engine默认不会自动处理Flutter Web的静态文件路由，也未配置单页应用的重定向规则，导致Flutter所需的静态资源（如flutter.js）无法被正确访问。

正确的app.yaml配置方案 #

替换现有app.yaml为以下内容，确保静态资源和SPA路由被正确处理：

runtime: python39

handlers:
  # 处理所有静态资源请求
  - url: /(.*\.(html|css|js|png|jpg|jpeg|gif|ico|svg|json|txt|woff|woff2|ttf|eot))$
    static_files: build/web/\1
    upload: build/web/(.*\.(html|css|js|png|jpg|jpeg|gif|ico|svg|json|txt|woff|woff2|ttf|eot))$

  # 处理单页应用的路由重定向，所有非静态资源请求指向index.html
  - url: /.*
    static_files: build/web/index.html
    upload: build/web/index.html

部署步骤 #

1. 重新执行flutter build web确保构建产物最新
2. 在项目根目录（与build文件夹同级）放置上述app.yaml
3. 执行gcloud app deploy重新部署应用

验证 #

部署完成后访问应用地址，检查网络面板中flutter.js等资源是否返回200状态，确认计数器功能正常加载。

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