使用Capacitor打包Vue3 Firebase应用时可调用函数失效

针对Capacitor iOS环境下Firebase可调用函数、onAuthStateChanged回调执行后挂起无响应的问题，以下是针对性的排查和解决步骤：

1. 配置Capacitor允许Firebase相关域名导航 #

Capacitor的WebView默认限制跨域导航，需显式允许Firebase服务域名。修改你的Capacitor配置：

const config: CapacitorConfig = {
  appId: "com.appname.app",
  appName: "AppName",
  webDir: "dist",
  ios: {
    contentInset: "always"
  },
  server: {
    allowNavigation: [
      "*.firebasefunctions.com",
      "*.firebaseio.com",
      "*.googleapis.com"
    ]
  }
};

2. 确保Firebase Functions初始化正确并开启调试 #

初始化Functions时指定正确区域，同时开启调试模式便于查看移动端错误日志：

import { getFunctions, httpsCallable } from "firebase/functions";

// 初始化Functions并指定区域
const functions = getFunctions(firebaseApp, "us-central1");
// 生产环境保留，开发环境可连接本地模拟器（需注释生产配置）
// connectFunctionsEmulator(functions, "localhost", 5001);

// 开启调试日志
functions.logger.logLevel = "debug";

const exchangeCodeForToken = httpsCallable(functions, "authorization");

3. 配置iOS网络权限 #

在Xcode中打开Info.plist，添加App Transport Security配置确保Firebase域名的HTTPS请求被允许：

<key>NSAppTransportSecurity</key>
<dict>
  <key>NSAllowsArbitraryLoads</key>
  <false/>
  <key>NSExceptionDomains</key>
  <dict>
    <key>firebasefunctions.com</key>
    <dict>
      <key>NSIncludesSubdomains</key>
      <true/>
      <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
      <false/>
    </dict>
  </dict>
</dict>

4. 确保Firebase初始化完成后再调用相关方法 #

避免在FirebaseApp未完全初始化时调用Functions或Auth接口，可在Vue的onMounted中等待初始化完成：

import { onMounted } from "vue";
import { getApp, initializeApp } from "firebase/app";

let firebaseApp;

onMounted(async () => {
  try {
    firebaseApp = getApp();
  } catch {
    firebaseApp = initializeApp(firebaseConfig);
  }
  // 初始化完成后再绑定事件或调用函数
});

5. 查看移动端控制台日志 #

在Xcode控制台中搜索Firebase、Functions相关日志，很多时候挂起是因为隐藏的初始化错误或网络拦截，通过日志定位具体失败原因。

6. 检查SDK版本兼容性 #

确保Vue3、Capacitor和Firebase SDK版本匹配，推荐使用稳定版本组合：

• firebase: ^9.23.0+
• @capacitor/core: ^5.0.0+
• vue: ^3.3.0+

若以上步骤无效，可尝试修改Capacitor的WebView源为http://localhost：

const config: CapacitorConfig = {
  // ...其他配置
  server: {
    url: "http://localhost:5173", // 开发环境使用
    cleartext: true // 允许明文请求，仅开发用
  }
};

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