在Firebase Hosting部署带vue-router的Quasar(VueJS)应用遇异常

Hey there! Let's figure out why your Quasar SPA isn't loading even though Firebase says the deployment succeeded. Based on your setup, here are some common issues and fixes to try:

1. Verify Your Local Build Output First #

First, rule out a local build issue:

• Navigate to the dist/spa-mat folder on your machine.
• Open index.html directly in your browser. If it doesn't load here, the problem lies with your Quasar build, not Firebase.
• Confirm the folder contains all necessary files: index.html, js/, css/, and any assets your app uses. If files are missing, re-run quasar build and check that the process finishes without errors.

2. Fix Firebase.json Syntax Errors #

Looking at your provided config, it seems the JSON might be incomplete (missing closing braces). A valid firebase.json for a Quasar SPA should look like this:

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

• Double-check your file for missing brackets or commas—invalid JSON will break Firebase's rewrite rules, which are critical for SPA routing to work.

3. Confirm Firebase Init Targeted the Correct Directory #

When you ran firebase init, did you explicitly select dist/spa-mat as your public directory? It's easy to accidentally pick the root folder or another path. To verify:

• Run firebase deploy --only hosting and watch the output. It should list files being uploaded from dist/spa-mat.
• If not, re-run firebase init hosting (you can keep existing configs when prompted) and make sure to select the correct folder this time.

4. Check Browser Dev Tools for Clues #

Open your deployed page, hit F12 to launch DevTools, and inspect these tabs:

• Console: Look for 404 errors (e.g., missing JS/CSS files) or JavaScript runtime errors. This could indicate a misconfigured publicPath in Quasar. In quasar.conf.js, ensure build.publicPath is set to "/" (the default) unless you're deploying to a subdirectory on Firebase.
• Network: Confirm index.html loads with a 200 status, and that all other assets (JS, CSS, images) also load successfully.

5. Clear Firebase Hosting Cache #

Firebase caches static resources aggressively. Even if you deployed correctly, old cached files might be causing issues:

• Run firebase deploy --only hosting -m "Clear cache for updated SPA"
• Or, go to your Firebase Console → Hosting → Settings → Clear Cache manually.

Try these steps one by one, and your Quasar SPA should load properly on Firebase Hosting!

内容的提问来源于stack exchange，提问作者ReyAnthonyRenacia