Flutter Web部署Firebase后Google Map显示灰屏问题求助

问题分析 #

部署到Firebase后仅地图页面灰屏、本地运行正常，核心原因通常是路径配置错误、脚本冲突或API权限限制。结合你提供的index.html，以下是针对性修复步骤：

1. 修正Base路径配置 #

你的<base href="ReDue">不符合规范，必须首尾带斜杠才能正确解析相对路径，否则会导致地图相关资源加载失败。修改为：

<base href="/ReDue/">

同时构建Web应用时必须指定对应参数，确保Flutter适配路径：

flutter build web --base-href "/ReDue/"

2. 移除重复的main.dart.js引用 #

你重复加载了两次main.dart.js，这会引发脚本冲突，干扰Flutter引擎初始化和地图加载。删除其中一行，保留带defer的版本：

<!-- 移除下面这行重复代码 -->
<!-- <script  src="main.dart.js" type="application/javascript"></script> -->
<!-- 保留这一行即可 -->
<script src="main.dart.js" defer></script>

3. 授权Firebase域名访问Google Maps API #

本地正常但部署后失效，大概率是API Key未允许Firebase域名访问。登录Google Cloud控制台，找到你的API Key，添加Firebase托管域名到允许的HTTP引用列表，例如：

• https://你的项目ID.web.app/*
• https://你的项目ID.firebaseapp.com/*

4. 调整Maps脚本加载顺序 #

确保Google Maps脚本在Flutter初始化前加载完成，将其移到<head>顶部位置：

<head>
  <!-- 优先加载Maps脚本 -->
  <script src="https://maps.googleapis.com/maps/api/js?key=你的API_KEY"></script>
  <!-- 其他head内容... -->
</head>

5. 验证部署文件完整性 #

执行flutter build web后，确保将build/web目录下所有文件完整部署到Firebase，避免遗漏资源。部署命令：

firebase deploy --only hosting

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