I have a Nuxt app running successfully on my local server and all API requests are successfully running from the same server (using the serverMiddleware property in nuxt.config.js). When I run a yarn generate, the path to the API server is lost and no data is loaded. Below are a few screenshots.

Loads data successfully from the API.

Unable to find API

Here is an example of an api call in project_dir api/index.js file

const express = require("express");
const passport = require("passport");
const allRoutes = require("../api/routes/routes");
const guestRoutes = require("../api/routes/guest");
const fileUpload = require("express-fileupload");
const path = require("path");

// Create express instance
const app = express();
// Init body-parser options (inbuilt with express)
app.use(express.json());
app.use(fileUpload());
app.use(express.urlencoded({ extended: false }));

app.use(express.static(path.join(__dirname, "../", "dist")));

/**
 * -------------- PASSPORT AUTHENTICATION ----------------
 */

// Need to require the entire Passport config module so index.js knows about it
require("./config/passport-jwt");

// Initialize Passport
app.use(passport.initialize());

/**
 * -------------- ROUTES ----------------
 */

// Imports all of the routes from ./routes/index.js
app.use(guestRoutes);
app.use(passport.authenticate("jwt", { session: false }), allRoutes);

console.log("express");
console.log(path.join(__dirname, "../", "dist"));


app.get("*", (req, res) => {
  res.sendFile(path.join(__dirname, "../", "dist", "index.html"));
});

// Export express app
module.exports = app;

I don't know why I'm not able to get data from the API routes which I'm running on the same server.