MEAN架构：Angular应用的Node.js服务器如何处理Angular路由？

我帮你把这个Node.js服务器的代码整理完善好啦，刚好适配你的Angular项目结构——Angular文件都在/client目录，build产物在client/dist对吧？直接用下面的配置就行：

完整的server.js代码 #

const express = require('express');
const colors = require('colors');
const bodyParser = require('body-parser');
const path = require('path');
const cors = require('cors');

// 端口配置：优先用环境变量，默认3200
const PORT = process.env.PORT || '3200';

// 初始化Express应用
const app = express();

// CORS配置：允许本地Angular开发服务器的跨域请求
app.use(cors({ origin: `http://localhost:4200` }));

// 解析JSON和表单格式的请求体
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

// 托管Angular构建后的静态资源
app.use(express.static(path.join(__dirname, 'client/dist')));

// 处理SPA路由：所有非API请求都返回Angular的index.html
// 解决单页应用刷新页面404的问题
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'client/dist/index.html'));
});

// 启动服务器并打印日志
app.listen(PORT, () => {
  console.log(`✅ Server running on port ${PORT}`.green);
});

关键配置说明 #

• CORS设置：专门允许http://localhost:4200（Angular开发服务器默认端口）的跨域请求，开发阶段前后端联调不会有跨域问题。
• 静态文件托管：express.static精准指向client/dist目录，确保Angular执行ng build后生成的JS、CSS、HTML等资源能被正确访问。
• SPA路由兼容：app.get('*')捕获所有非API的请求，返回Angular的入口文件index.html，解决单页应用刷新页面出现404的经典问题。
• 端口灵活性：优先读取环境变量PORT，适配云服务器或容器部署的端口要求，本地开发默认用3200。

快速使用步骤 #

1. 在项目根目录安装依赖：

npm install express colors body-parser cors

2. 进入client目录构建Angular应用（生产环境加--prod参数）：

cd client
ng build --prod

3. 返回项目根目录启动服务器：

cd ..
node server.js

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