如何在Node.js中配置访问Angular4前端项目（路径www.xyz.com/frontend）

嘿，我来帮你搞定这个问题！假设你用的是Express框架（绝大多数Node.js后端项目都会用它），要让存储在frontend文件夹里的Angular4前端代码能通过www.xyz.com/frontend访问，你需要在app.js里做以下修改：

1. 配置静态资源服务 #

首先确保你已经安装了Express（没装的话先跑npm install express --save），然后在app.js中添加静态文件中间件，把frontend文件夹挂载到/frontend路径下：

const express = require('express');
const path = require('path'); // 后面处理路由回退会用到
const app = express();

// 核心配置：将frontend文件夹设为/frontend路径下的静态资源目录
app.use('/frontend', express.static('frontend'));

// 你的其他后端路由（比如API接口）可以放在这里
// app.use('/api', require('./routes/api'));

app.listen(3000, () => {
  console.log('服务器已启动，端口3000');
});

2. 处理Angular单页应用的路由回退问题 #

Angular是单页应用，直接刷新www.xyz.com/frontend/some-page这类子路由会出现404错误，所以需要添加一个回退路由，让所有/frontend下的非静态文件请求都返回Angular的index.html：

// 注意：这行要放在静态资源配置之后，其他路由之前
app.get('/frontend/*', (req, res) => {
  res.sendFile(path.join(__dirname, 'frontend', 'index.html'));
});

关键建议 #

• 先打包Angular项目：不要直接把Angular的源码放到frontend文件夹，先在Angular项目里执行ng build --prod生成生产环境的打包文件，然后把dist文件夹里的所有内容复制到frontend文件夹中，这样加载速度更快，也避免浏览器无法识别TypeScript代码的问题。
• 核对路径正确性：如果frontend文件夹不在项目根目录，比如在public/frontend，那要把代码里的路径改成对应的，比如express.static('public/frontend')和path.join(__dirname, 'public', 'frontend', 'index.html')。
• 本地测试验证：先在本地启动服务器，访问http://localhost:3000/frontend，确认能正常加载页面，再测试刷新子路由是否正常，避免直接部署到线上出问题。
• 避免路由冲突：如果你的后端有API接口，建议把API路由统一放在/api这类前缀下，和/frontend的前端路由区分开，防止路由冲突。

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