MEVN应用开发：开发与生产环境API调用URL及部署配置问询

Got it, let's walk through how to configure your MEVN app for both development and production—this is a standard setup I use all the time, so it should work smoothly for you.

Development Environment Setup #

In dev, we want the webpack-dev-server handling hot reloading for Vue, while our Express backend runs separately. Here's the step-by-step:

1. Frontend Vue Proxy Configuration #

Since your frontend runs on localhost:8080 and backend on localhost:8081, we need to proxy API requests to avoid CORS issues. Create or update vue.config.js in your Vue project root:

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8081',
        changeOrigin: true,
        pathRewrite: {
          '^/api': '' // Optional: remove this if your backend routes already start with /api
        }
      }
    }
  }
}

Now any request your Vue app makes to /api/* will be forwarded to localhost:8081/* automatically.

2. Backend Express Server Setup #

Make sure your Express server listens on port 8081. In your server entry file (e.g., server.js):

const express = require('express');
const app = express();

// Your API routes go here first
app.get('/api/users', (req, res) => {
  res.json({ message: 'Hello from the backend!' });
});

const PORT = process.env.PORT || 8081;
app.listen(PORT, () => {
  console.log(`Backend running on http://localhost:${PORT}`);
});

3. Start Both Servers Simultaneously #

To avoid juggling two terminal windows, use the concurrently package to launch both servers at once. First install it:

npm install concurrently --save-dev

Then update your project's root package.json (adjust paths if your client/server are in different folders):

"scripts": {
  "dev:client": "cd client && npm run serve",
  "dev:server": "cd server && npm run dev",
  "dev": "concurrently \"npm run dev:client\" \"npm run dev:server\""
}

Now just run npm run dev to fire up both servers together.

Production Environment Setup #

In production, we'll serve the static Vue build directly from our Express server—so only one process needs to run.

1. Build the Vue Frontend #

First, generate the production-ready static files for your Vue app:

cd client && npm run build

This creates a dist folder with minified CSS, JS, and HTML files.

2. Configure Express to Serve Static Files #

Update your Express server.js to serve the dist folder, and handle SPA routing (critical if you're using Vue Router in history mode):

const express = require('express');
const path = require('path');
const app = express();

// Keep API routes first—they need to be handled before static files
app.get('/api/users', (req, res) => {
  res.json({ message: 'Hello from production backend!' });
});

// Serve Vue's static build files
app.use(express.static(path.join(__dirname, '../client/dist')));

// SPA fallback: return index.html for any non-API route (fixes refresh 404s)
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, '../client/dist/index.html'));
});

const PORT = process.env.PORT || 8081;
app.listen(PORT, () => {
  console.log(`Production server running on http://localhost:${PORT}`);
});

Pro tip: Always put API routes before static file serving—otherwise Express will try to serve a static file for your API requests, which won't work.

3. Production Start Script #

Add a start script to your root package.json:

"scripts": {
  "start": "cd server && node server.js"
}

Now you can run npm start to launch the production server, which handles both API requests and serves your Vue app.

Bonus Tips #

• Use dotenv to manage environment variables (e.g., API base URLs, database credentials) so you don't hardcode dev/production differences.
• For extra production security, add middleware like helmet to set secure HTTP headers.
• If you're deploying to a service like Heroku, make sure your package.json has a start script and that the dist folder is included in your deploy (or build it on the server).

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