NX 14.8.2环境变量在serve生效但build运行时失效问题求助

一、修复构建后API端口undefined的问题 #

1. 构建时复制.env文件到dist目录 #

修改apps/api/project.json中的build目标，将.env添加到assets数组，确保构建产物包含配置文件：

"targets": {
  "build": {
    "executor": "@nrwl/node:build",
    "options": {
      "outputPath": "dist/apps/api",
      "main": "apps/api/src/main.ts",
      "tsConfig": "apps/api/tsconfig.app.json",
      "assets": [
        "apps/api/.env" // 新增该行，复制.env到dist目录
      ]
    },
    "configurations": {
      "production": {
        "optimization": true,
        "extractLicenses": true,
        "inspect": false
      }
    }
  }
}

2. 在API入口手动加载.env #

先安装依赖：

npm install dotenv --save

然后在apps/api/src/main.ts顶部添加加载逻辑：

import * as dotenv from 'dotenv';
import { resolve } from 'path';

// 加载dist目录下的.env文件
dotenv.config({ path: resolve(__dirname, '../.env') });

这样运行dist/apps/api/main.js时就能读取到正确的环境变量。

二、使用environment.ts并实现跨库环境配置 #

1. 配置API项目的environment文件 #

在apps/api/src/environments下创建两个环境文件：

• environment.ts（开发环境）：

export const environment = {
  production: false,
  apiPort: process.env.NX_API_PORT || 3000,
  apiBaseUrl: `http://localhost:${process.env.NX_API_PORT || 3000}`
};

• environment.prod.ts（生产环境）：

export const environment = {
  production: true,
  apiPort: process.env.NX_API_PORT || 5000,
  apiBaseUrl: `https://your-prod-domain.com` // 替换为实际生产地址
};

在API代码中直接使用该配置：

import { environment } from './environments/environment';

const port = environment.apiPort;
// 启动服务逻辑...

2. 让shared库适配不同环境的API地址 #

由于libs不能直接依赖apps的配置，推荐两种方案：

方案一：业务端传入API基础地址

在libs/shared/api/data-access/src/lib/services/api.service.ts中，将基础地址作为构造参数：

export class ApiService {
  private readonly baseUrl: string;

  constructor(baseUrl: string) {
    this.baseUrl = baseUrl;
  }

  // 示例请求方法
  fetchUsers() {
    return fetch(`${this.baseUrl}/users`);
  }
}

在使用该服务的前端项目中，从自身environment传入地址：

import { environment } from '../environments/environment';
import { ApiService } from '@your-workspace/shared/api/data-access';

const apiService = new ApiService(environment.apiBaseUrl);

前端项目的environment.ts中配置对应环境的API地址即可。

方案二：给shared库配置独立NX环境变量

在shared库中直接使用NX前缀的环境变量：

// libs/shared/api/data-access/src/lib/config.ts
export const apiBaseUrl = process.env.NX_SHARED_API_BASE_URL || 'http://localhost:3000';

然后在根目录.env或对应项目.env中配置：

# 开发环境
NX_SHARED_API_BASE_URL=http://localhost:5000

# 生产环境（可在.env.prod中配置）
NX_SHARED_API_BASE_URL=https://your-prod-domain.com

NX会自动将所有NX_开头的变量注入到所有项目的构建过程，构建时根据当前环境替换变量值。

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