Firebase Hosting中Vue.js/Node.js项目Rewrites配置问题求助

Let’s walk through the key issues in your current setup and fix them to get your rewrites working correctly.

Core Problems Identified #

Looking at your configs, there are two critical issues causing rewrite failures, plus a few optimizations to make:

1. Missing Cloud Function Export #

Your app.js defines an Express app, but it doesn’t export it as a Firebase Cloud Function. The firebase.json references "function": "app", but Firebase has no way to find this function without an explicit export.

2. Incorrect Rewrite Rule Order #

Your current rewrites send only the root path to your Express function, while all other paths (including API endpoints) get routed to index.html. This means requests like /GCPScheduler or /list-server are being handled by your Vue SPA instead of your Node backend.

3. Unnecessary Static File Serving in Cloud Function #

Your production check for serving the dist folder is redundant—Firebase Hosting already handles hosting your Vue app’s static files. This code can cause conflicts in the Cloud Functions environment.

Step-by-Step Fixes #

1. Export Your Express App as a Cloud Function #

Add this line to the very end of app.js:

exports.app = functions.https.onRequest(app);

This tells Firebase to expose your Express app as a Cloud Function named app, matching what’s referenced in firebase.json.

2. Rewrite Firebase Hosting Rules to Prioritize API Requests #

Update your firebase.json rewrites to ensure API endpoints are routed to your Cloud Function before falling back to the SPA. You have two options depending on your API structure:

Option A: For Specific API Paths (Recommended for Your Setup)

If your API only uses /GCPScheduler and /list-server, define explicit rules for these paths first:

"rewrites": [
  { "source": "/GCPScheduler", "function": "app"},
  { "source": "/list-server", "function": "app"},
  { "source": "**", "destination": "/index.html"}
]

Option B: For API Paths with a Prefix (Scalable for Future Endpoints)

If you plan to add more API routes later, prefix all endpoints with /api (e.g., /api/GCPScheduler), then update rewrites:

"rewrites": [
  { "source": "/api/**", "function": "app"},
  { "source": "**", "destination": "/index.html"}
]

If you choose this option, update your Api.js base URL to include the prefix, and adjust your Express route definitions to match (e.g., app.get('/api/GCPScheduler', ...)).

3. Remove Redundant Static File Serving #

Delete this block from app.js—Firebase Hosting already serves your Vue app’s dist folder:

if (process.env.NODE_ENV === 'production') {
  app.use(express.static(__dirname + '/dist'));
  app.get('*', (req, res) => res.sendFile(__dirname + '/dist/index.html'));
}

This code is only useful for local development (running the Express app directly), not when deploying to Firebase.

4. Verify Client API Configuration #

Double-check your Api.js base URL is correct. If you didn’t add an /api prefix, it should stay as is:

return axios.create({
  baseURL: `https://dev-cloudthrifty-com.firebaseapp.com`
})

Ensure your frontend is making requests to the exact paths defined in your Express routes (e.g., /GCPScheduler instead of /api/GCPScheduler unless you updated the prefix).

Deploy & Test #

After making these changes, deploy your updates:

# Deploy Cloud Functions first
firebase deploy --only functions

# Then deploy Hosting
firebase deploy --only hosting

Test both your Vue SPA navigation (to ensure rewrite to index.html works) and your API endpoints (to confirm they hit your Express backend).

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