Vue.js集成Node.js后端部署Firebase Hosting遇异常求助

Hey there! Let's break down what's going wrong and fix this step by step. That "needs JavaScript enabled" error usually pops up when your Vue app isn't being served correctly (either assets aren't loading, or routing is messed up), combined with misconfigured Firebase Hosting ↔ Cloud Functions integration.

1. Fix Firebase Hosting Rewrites (Critical!) #

Your current firebase.json has a conflicting rewrite rule—it's trying to send all traffic both to /index.html AND the app function, which won't work. We need to split this: send API requests to the Cloud Function, and all other requests (Vue routes) to index.html.

Update your firebase.json hosting section to this:

{
  "hosting": {
    "public": "dist",
    "rewrites": [
      // Send API requests to your Cloud Function
      {
        "source": "/api/**",
        "function": "app"
      },
      // Send all other requests to Vue's index.html (for SPA routing)
      {
        "source": "**",
        "destination": "/index.html"
      }
    ],
    // Keep your existing ignore, headers, cleanUrls settings
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "headers": [
      // ... your existing headers here ...
    ],
    "cleanUrls": true
  }
}

Note: I added /api/** as the API prefix—you'll need to update your Express routes to start with /api (like /api/GCPScheduler, /api/list-server) to match this.

2. Adjust Your Express App (Backend) #

Right now, your Express app is trying to serve the dist folder in production—but Firebase Hosting already handles hosting static assets, so we can remove that part. Also, make sure your API routes come before any catch-all routes, and use the /api prefix we set up.

Update your app.js like this:

const express = require('express')
const bodyParser = require('body-parser')
const cors = require('cors')
const morgan = require('morgan')
var firebase = require('firebase');
const functions = require('firebase-functions');
const axios = require('axios');
const credentials = new Buffer('testing:testing123').toString('base64')
const app = express()

app.use(morgan('combined'))
app.use(bodyParser.json())
app.use(cors())

// Initialize Firebase (keep this)
const firebaseConfig = {
  // ... your existing config ...
};
firebase.initializeApp(firebaseConfig);
var db = firebase.firestore();

// --- Update API routes to use /api prefix ---
app.get('/api/GCPScheduler', (req, res) => {
  res.send( [{ title: "Hello World!", description: "Hi there! How are you?" }] )
})

app.post('/api/list-server', (req, res) => {
  // ... keep your existing payment logic here ...
})

// --- REMOVE the production static file serving block ---
// We don't need this because Firebase Hosting serves dist directly

// Export the function (keep this)
exports.app = functions.https.onRequest(app);

3. Fix Vue's API Base URL #

Your Api.js is hardcoding the production URL, which can cause CORS issues and won't work with the Firebase Function routing. Instead, use a relative path so it works both locally and in production.

Update client/src/services/Api.js:

import axios from 'axios'
export default() => {
  return axios.create({
    baseURL: '/api' // Relative path, matches our Firebase rewrite rule
    // For local development, add a conditional:
    // baseURL: process.env.NODE_ENV === 'production' ? '/api' : 'http://localhost:8081/api'
  })
}

If you run local development, make sure your Express app uses the /api prefix too, and update your Vue devServer proxy to forward /api requests to your local Node server.

4. Ensure Proper Build & Deployment Steps #

Follow these steps in order before deploying:

• Build your Vue app: Run cd client && npm run build—this will generate the dist folder in the root (as set in your vue.config.js).
• Deploy both Hosting and Functions: Run firebase deploy --only hosting,functions (don't deploy them separately, since they need to work in sync).

5. Check for Common Pitfalls #

• CORS Issues: Since we're using cors() middleware in Express, this should be covered, but double-check that your API routes use the /api prefix so they hit the Cloud Function.
• Cloud Function Dependencies: Make sure your root package.json has all necessary dependencies (express, cors, etc.)—Firebase Functions needs to install these to run your backend.
• Vue Router Mode: Your cleanUrls setting is enabled—ensure your Vue router uses history mode (standard for SPAs) to avoid 404 errors.

After making these changes, redeploy and test—your Vue app should load correctly, and API requests should route to your Node.js backend via Cloud Functions.

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