Flutter部署Firebase Hosting后libphonenumber_plugin调用方法报错

针对你部署Firebase Hosting后PhoneNumber.getRegionInfoFromPhoneNumber报错的问题，从Web环境特性、插件配置、部署缓存三个方向排查，具体步骤如下：

1. 检查index.html脚本加载有效性 #

本地debug模式下资源加载宽松，但生产环境容易出现脚本加载失败或顺序问题：

• 确保libphonenumber-js脚本用稳定CDN链接，且放在flutter.js之前加载，不要加async/defer（避免Flutter初始化时脚本未就绪）：

  <script src="https://cdnjs.cloudflare.com/ajax/libs/libphonenumber-js/1.10.25/libphonenumber-js.min.js"></script>
  <script src="flutter.js" defer></script>
  

• 部署后打开浏览器控制台，查看是否有404错误（脚本加载失败是高频原因）。

2. 验证libphonenumber_plugin的Web适配 #

该插件在Web环境完全依赖libphonenumber-js全局变量，需确认：

• pubspec.yaml中依赖声明正确，版本兼容（你当前的0.7.3+1搭配0.3.1是兼容的，若仍有问题可尝试更新到最新兼容版本）；
• 不要在Web环境单独调用插件的原生方法，intl_phone_number_input已经封装了适配逻辑，直接用包内的PhoneNumber.getRegionInfoFromPhoneNumber即可，无需额外处理。

3. 解决Firebase Hosting缓存问题 #

部署后旧缓存可能导致新配置未生效：

• 在firebase.json中添加缓存规则，强制index.html不缓存：

  {
    "hosting": {
      "headers": [
        {
          "source": "/index.html",
          "headers": [{"key": "Cache-Control", "value": "no-cache"}]
        }
      ]
    }
  }
  

• 部署时执行firebase deploy --only hosting，或在Firebase控制台手动刷新缓存。

4. 绕过插件，直接用JS实现（兜底方案） #

如果插件兼容性问题无法解决，可在Web环境直接调用libphonenumber-js的API，避免依赖插件：

import 'dart:js' as js;
import 'package:flutter/foundation.dart';
import 'package:intl_phone_number_input/intl_phone_number_input.dart';

Future<PhoneNumber> getPhoneRegionInfo(String number) async {
  if (kIsWeb) {
    final phoneUtil = js.context['libphonenumber']['PhoneNumberUtil'].callMethod('getInstance');
    final parsedNumber = phoneUtil.callMethod('parse', [number, 'ZZ']);
    final regionCode = phoneUtil.callMethod('getRegionCodeForNumber', [parsedNumber]);
    final countryCode = parsedNumber['countryCode'];
    
    return PhoneNumber(
      phoneNumber: number,
      isoCode: regionCode,
      dialCode: '+$countryCode',
    );
  } else {
    return await PhoneNumber.getRegionInfoFromPhoneNumber(number);
  }
}

5. 本地复现生产环境问题 #

先在本地编译release版本测试，排除Firebase因素：

flutter build web --release

打开build/web/index.html，如果同样报错，说明是release编译的问题，可尝试切换渲染器：
在index.html的<head>中添加：

<script>
  window.flutterWebRenderer = "html"; // 切换为html渲染器，默认是canvaskit
</script>

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