如何在NX Monorepo中实现多应用本地跨路径导航与互访？

要在本地模拟生产环境的同域名子路径部署，实现跨应用正常导航，按以下步骤操作即可：

1. 给每个应用配置独立基础路径与端口 #

每个React应用需要明确自己的根路径（对应生产环境的Nginx子路径），同时指定不冲突的本地端口：

在每个应用的project.json的serve目标中添加配置：

{
  "targets": {
    "serve": {
      "executor": "@nx/webpack:dev-server",
      "options": {
        "buildTarget": "app-a:build",
        "baseHref": "/app-a/",
        "port": 4201
      }
    }
  }
}

• 把app-a替换为对应应用的子路径（比如app-b、app-c）
• 每个应用分配唯一端口（4201、4202...4205）

同时在React Router中配置basename，确保路由匹配基础路径：

import { BrowserRouter } from 'react-router-dom';

function App() {
  // 可通过NX环境变量动态注入，避免硬编码
  const baseHref = process.env.NX_APP_BASE_HREF || '/app-a/';
  return (
    <BrowserRouter basename={baseHref}>
      {/* 应用路由内容 */}
    </BrowserRouter>
  );
}

2. 搭建本地反向代理模拟生产Nginx映射 #

通过代理将同一入口域名下的子路径转发到对应应用的端口，两种可选方案：

方案一：Node.js轻量代理 #

创建根目录下的proxy.js文件：

const express = require('express');
const { createProxyMiddleware } = require('http-proxy-middleware');

const app = express();

// 映射每个应用子路径到对应端口
app.use('/app-a', createProxyMiddleware({ target: 'http://localhost:4201', changeOrigin: true }));
app.use('/app-b', createProxyMiddleware({ target: 'http://localhost:4202', changeOrigin: true }));
app.use('/app-c', createProxyMiddleware({ target: 'http://localhost:4203', changeOrigin: true }));
app.use('/app-d', createProxyMiddleware({ target: 'http://localhost:4204', changeOrigin: true }));
app.use('/app-e', createProxyMiddleware({ target: 'http://localhost:4205', changeOrigin: true }));

app.listen(4200, () => {
  console.log('代理服务运行在 http://localhost:4200');
});

安装依赖后启动：

npm install express http-proxy-middleware --save-dev
node proxy.js

方案二：本地Nginx配置 #

修改本地Nginx的配置文件（比如nginx.conf）：

server {
    listen 4200;
    server_name localhost;

    location /app-a/ {
        proxy_pass http://localhost:4201/app-a/;
        proxy_set_header Host $host;
    }

    location /app-b/ {
        proxy_pass http://localhost:4202/app-b/;
        proxy_set_header Host $host;
    }
    # 其余3个应用同理添加location规则
}

重启Nginx加载配置即可。

3. 启动所有应用并测试 #

用NX的run-many并行启动所有应用：

nx run-many --target=serve --projects=app-a,app-b,app-c,app-d,app-e --parallel

然后通过代理入口http://localhost:4200/app-a访问应用，跨应用链接直接使用绝对路径（比如/app-b/home），代理会自动转发到对应应用的路由，实现和生产环境一致的导航体验。

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