Ionic Vue 3 on subdomain on Firebase Hosting not finding index.html

Issue

Using Ionic and Vue 3 I wrote an app that works well. I'm now using the same code to put the app functionality onto my website - portal subdomain. I have a second subdomain (www) pointing at a separate html only site in the same hosting area.

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

This all works fine. If I go to portal.example.com I get the correct homepage with various options which I click on and I go to the relevant vue page such as portal.example.com/contacts. I can then click on a contact and it shows me the correct page - portal.example.com/contacts/ba76ea50-e1b6-414b

This is where the problem lies. If I copy\paste that url (portal.example.com/contacts/ba76ea50-e1b6-414b) into another browser window I get the Firebase Page not Found page:

What this is saying to me is that the index.html page that the Vue 3 app is mounted on is not being initialised when copy pasting and going directly to the url. I have no idea how to tell the Vue 3 app how to do that. I guess it should be in the portal.example.com firebase.json file:

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

Am I looking at the right place or am I completely going in the wrong direction? This is important because the specific URLs are emailed to users so they can click and see the correct data.

Solution

So the solution is firebase.json related. As there are multiple sites in the hosting you have a firebase.json for each site plus one at a root level. The root level firebase.json maps subdomain to the site. I needed to add the rewrites section to the root firebase.json as well.

   {
    "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
  }]
  }

Answered By - Wyn