Vue.js SPA部署Firebase Hosting后无法调用Cloud Functions问题

你遇到的核心问题是Firebase Hosting的重写规则优先级与Vue Router的路由拦截逻辑冲突，导致云函数请求被错误转发到Vue应用。下面是一步步的解决方案：

1. 调整Firebase Hosting重写规则的优先级 #

Firebase的rewrite规则是从上到下匹配的，一定要让云函数的匹配规则排在Vue应用前面，确保函数请求不会被Vue路由捕获。

修改你的firebase.json，参考以下配置：

{
  "hosting": {
    "public": "public",
    "rewrites": [
      // 优先匹配云函数请求，直接转发到对应函数
      {
        "source": "/your-function-name", // 替换为你的云函数名称
        "function": "your-function-name"
      },
      // 如果函数有统一前缀（比如/api），可用通配符批量匹配
      {
        "source": "/api/**",
        "function": "your-api-function"
      },
      // 再匹配Vue应用的所有路径，转发到app目录下的index.html
      {
        "source": "/app/**",
        "destination": "/app/index.html"
      },
      // 可选：根路径重定向到Vue应用入口
      {
        "source": "/",
        "destination": "/app/"
      }
    ]
  }
}

2. 限制Vue Router的作用范围 #

把Vue应用放在/app路径后，一定要给Vue Router设置正确的base路径，避免它捕获根路径下的云函数请求：

// Vue Router配置文件中
import { createRouter, createWebHistory } from 'vue-router';

const router = createRouter({
  // 设置base为/app/，确保路由只处理/app开头的路径
  history: createWebHistory('/app/'),
  routes: [
    // 你的路由规则，比如：
    { path: '/', component: Home },
    { path: '/about', component: About }
  ]
});

3. 正确调用Firebase Cloud Functions #

在Vue应用中调用云函数时，不要使用相对路径（比如./your-function-name），否则会被Vue Router拦截。推荐两种可靠方式：

方式一：使用绝对路径直接请求 #

// 替换为你的项目域名和函数名
const functionUrl = 'https://your-project-id.firebaseapp.com/your-function-name';

async function callFunction() {
  try {
    const response = await fetch(functionUrl, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ data: 'test' })
    });
    const result = await response.json();
    console.log(result);
  } catch (error) {
    console.error('调用函数失败:', error);
  }
}

方式二：使用Firebase SDK调用（更推荐） #

官方SDK会自动处理路径和认证，避免路径错误：

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

// 初始化Firebase应用
const firebaseConfig = {
  // 你的Firebase配置
};
const app = initializeApp(firebaseConfig);

// 获取函数实例并调用
const functions = getFunctions(app);
const callMyFunction = httpsCallable(functions, 'your-function-name');

async function invokeFunction() {
  try {
    const result = await callMyFunction({ data: 'test' });
    console.log(result.data);
  } catch (error) {
    console.error('函数调用出错:', error);
  }
}

4. 测试验证 #

部署修改后的配置和代码后，按以下步骤验证：

• 直接在浏览器访问云函数URL（比如https://your-project-id.firebaseapp.com/your-function-name），确认函数能正常返回结果
• 访问Vue应用（https://your-project-id.firebaseapp.com/app），测试应用内的函数调用是否成功

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