title: Firebase Hosting 400 Bad Request
body: <p>Im trying to get firebase hosting setup for my project. I've deployed to <a href="https://budyeez-app.web.app/" rel="nofollow noreferrer">https://budyeez-app.web.app/</a></p>
  
  <p>Im using the vue.js framework to build my app so there is an index.html file in my public folder. All the vue content is loaded into that file to be rendered. Everything works fine on localhost but when I try to host the site on Firebase none of the vue content will load. If I write content directly into the index.html file it will load which explains why the page title works. Any ideas on how to fix this? </p>
  
  <p><a href="https://i.stack.imgur.com/Jo8yv.png" rel="nofollow noreferrer">Explorer</a></p>
  
  <p><strong>web_app/firebase.json</strong></p>
  
  <pre><code>{
    "firestore": {
      "rules": "firestore.rules",
      "indexes": "firestore.indexes.json"
    },
    "functions": {
      "predeploy": [
        "npm --prefix \"$RESOURCE_DIR\" run lint"
      ]
    },
    "hosting": {
      "public": "public",
      "ignore": [
        "firebase.json",
        "**/.*",
        "**/node_modules/**"
      ],
      "rewrites": [
        {
          "source": "**",
          "destination": "/index.html"
        }
      ]
    },
    "storage": {
      "rules": "storage.rules"
    }
  }
  </code></pre>
  
  <p><strong>web_app/public/index.html</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;meta name="viewport" content="width=device-width,initial-scale=1.0"&gt;
      &lt;link rel="icon" href="&lt;%= BASE_URL %&gt;favicon.ico"&gt;
      &lt;title&gt;Budyeez&lt;/title&gt;
      &lt;link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900"&gt;
      &lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css"&gt;
      &lt;script src="https://kit.fontawesome.com/3797ae5e09.js" crossorigin="anonymous"&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;h3&gt;This is a test&lt;/h3&gt;
      &lt;noscript&gt;
        &lt;strong&gt;We're sorry but web_app doesn't work properly without JavaScript enabled. Please enable it to continue.&lt;/strong&gt;
      &lt;/noscript&gt;
      &lt;div id="app"&gt;&lt;/div&gt;
      &lt;!-- built files will be auto injected --&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>