Vue.js Firebase 托管上的 SPA，通配符重写为 Firebase Cloud Functions

Question

我有一个使用 vue-router 的 vue.js 应用程序。如果我使用 firebase 托管在默认 public 目录中提供应用程序并尝试使用 https 函数，则该函数不会被调用，因为路由器选择路径并尝试呈现路由。

我将应用程序移至 public/app 并相应地更改了 firebase.json 重写（我的应用程序内容通过访问以 /app/** 结尾的 URL 按预期工作）但我仍然无法获得运行.

函数

我尝试使用通配符重写如下

"rewrites": [
  {
    "source": "/:function",
    "function": ":function"
  },
  {
    "source": "/app/**",
    "destination": "/app/index.html"
  }
]

但这也不起作用（我不确定它是否与函数有关，我在任何地方都找不到示例）。

例如我使用了默认函数 index.js（并且取消了 helloWorld 函数的注释），因此期望 /helloWorld 输出 helloWorld 函数的响应（正如我之前所说，如果我导航到 /app/route，我得到我期望从我的 vue 应用程序输出。

这应该有效吗？或者我需要做一些完全不同的事情吗？

------编辑

在 Doug 的评论之后，我将函数脚本更新为以下内容

import * as functions from 'firebase-functions';
import * as admin from 'firebase-admin';
import * as express from 'express';

const app = express();

app.get("/:function", (req, res) => {
    switch(req.params.function) {

        case 
            "helloWorld" : helloWorld(res)
            break;

        default : res.send("Invalid function requested.")

    }
});

function helloWorld(res) {
    res.send("Hello world!");
}

exports.api = functions.https.onRequest(app);

这在仅提供功能时按预期工作。

但是当我运行 firebase 服务时，重写（如下）对于我希望重写到我的函数的 api 路由仍然不起作用：

    "rewrites": [
      {
        "source": "/api/**",
        "function": "api"
      },
      {
        "source": "/app/**",
        "destination": "/app/index.html"
      }
    ]

我怀疑当运行ning firebase 服务时，它实际上并没有提供这些功能，因为我没有在终端中列出任何端点。

Answer 1

我让一切都按预期工作，例如以下示例：

functions/src/index.ts

import * as functions from 'firebase-functions';
import * as express from 'express';

const app = express();

app.get("/:function", (req, res) => {
    switch(req.params.function) {

        case 
            "helloWorld" : helloWorld(res)
            break;

        default : res.send("Invalid function requested.")

    }
});

app.get("/users/:id", (req, res) => {
    res.send("User with ID: " + req.params.id)
});

function helloWorld(res) {
    res.send("Hello world!");
}

exports.api = functions.https.onRequest(app);

firebase.json（重定向和重写）

    "redirects": [
      {
        "source": "/",
        "destination": "/app/",
        "type": 301
      }
    ],
    "rewrites": [
      {
        "source": "/app/**",
        "destination": "/app/index.html"
      },
      {
        "source": "/**",
        "function": "api"
      }
    ]

Vue.js Firebase 托管上的 SPA，通配符重写为 Firebase Cloud Functions

Vue.js SPA on Firebase Hosting with wildcard rewrite to Firebase Cloud Functions

firebase

single-page-application

firebase-hosting

google-cloud-functions

vue-router