title: Firebase site not found error when navigating directly into subdirectories
body: <p>I have a single-page app hosted on Firebase, built using <code>vue-cli</code> v3. Most of its routing is done using <code>vue-router</code>.</p>
  
  <p>The app works fine when users navigate to its home page and navigate around using the links within. Problem arise when a user navigates into a subdirectory using address bar or links from outside.</p>
  
  <p>The app is located here: <a href="https://www.amborjo.com" rel="nofollow noreferrer">https://www.amborjo.com</a>.</p>
  
  <p>Here's a sample of the problem: <a href="https://www.amborjo.com/covid-19" rel="nofollow noreferrer">https://www.amborjo.com/covid-19</a></p>
  
  <p>And here's relevant parts of <code>firebase.json</code></p>
  
  <pre><code>"hosting": {
      "public": "dist",
      "headers": [
        {
          "source": "/**",
          "headers": [
            {
              "key": "Cache-Control",
              "value": "no-cache, no-store, must-revalidate"
            }
          ]
        },
        {
          "source":
            "**/*.@(jpg|jpeg|gif|png|svg|webp|js|css|eot|otf|ttf|ttc|woff|woff2|font.css)",
          "headers": [
            {
              "key": "Cache-Control",
              "value": "max-age=604800"
            }
          ]
        }
      ],
      "ignore": [
        "firebase.json",
        "**/.*",
        "**/node_modules/**",
        "predeploy.sh"
      ],
      "predeploy": "npm run build",
      "rewrites": [
        {
          "source": "**",
          "destination": "/index.html"
        }
      ]
    }
  </code></pre>