Firebase 托管子域上的 Ionic Vue 3 找不到 index.html

Question

我使用 Ionic 和 Vue 3 编写了一个运行良好的应用程序。我现在使用相同的代码将应用程序功能放入我的网站 - 门户子域。我有第二个子域 (www) 指向同一托管区域中的一个单独的纯 html 站点。

www.example.com -> site1
Portal.example.com -> site2

这一切都很好。如果我访问 portal.example.com，我会得到正确的主页，其中包含各种选项，我单击这些选项，然后转到相关的 vue 页面，例如 portal.example.com/contacts。然后我可以单击联系人，它会显示正确的页面 - portal.example.com/contacts/ba76ea50-e1b6-414b

这就是问题所在。如果我将该网址 (portal.example.com/contacts/ba76ea50-e1b6-414b) 复制\粘贴到另一个浏览器窗口中，我会看到 Firebase Page not Found 页面：

这对我来说是，当复制粘贴并直接转到 URL 时，安装 Vue 3 应用程序的 index.html 页面并未被初始化。我不知道如何告诉 Vue 3 应用程序如何做到这一点。我想它应该在portal.example.com firebase.json 文件中：

    "hosting": [{
    "public": "dist",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites":[{
        "source": "**",
        "destination": "/index.html"
    }]
  }]

我是看对了地方还是完全走错了方向？这很重要，因为特定的 URL 会通过电子邮件发送给用户，以便他们可以单击并查看正确的数据。

Answer 1

所以解决方案与 firebase.json 相关。由于托管中有多个站点，因此每个站点都有一个 firebase.json 以及根级别的一个。根级别 firebase.json 将子域映射到站点。我还需要将重写部分添加到根 firebase.json 中。

   {
    "hosting": [{
      "target": "www",
      "public": "public-area/dist",
      "ignore": [
        "firebase.json",
        "**/.*",
        "**/node_modules/**"
      ]
    },
  {
      "target": "portal",
      "public": "portal-area/dist",
      "ignore": [
        "firebase.json",
        "**/.*",
        "**/node_modules/**"
      ],
      "rewrites": [                      <-- added
        {                                <-- added
          "source": "**",                <-- added
          "destination": "/index.html"   <-- added
        }                                <-- added
      ]                                  <-- added
  }]
  }