Nx开发与构建模式下NestJS资产路径歧义问题求解

方案一：环境变量动态切换路径 #

1. 在项目根目录创建两个环境文件：
   • .env.development：写入 ASSET_BASE_PATH=./apps/service/src/assets
   • .env.production：写入 ASSET_BASE_PATH=./assets
2. 在project.json的serve和build目标中分别绑定对应环境文件：

   "serve": {
     "executor": "@nx/nest:serve",
     "options": {
       "buildTarget": "service:build",
       "envFile": ".env.development"
     }
   },
   "build": {
     "executor": "@nx/nest:build",
     "options": {
       "outputPath": "dist/apps/service",
       "envFile": ".env.production"
     }
   }
   

3. 代码里通过环境变量拼接路径：

   doc.image(`${process.env.ASSET_BASE_PATH}/logo.jpg`)
   

方案二：统一静态资源访问前缀 #

1. 在main.ts里根据环境自动配置静态资源映射：

   import { NestFactory } from '@nestjs/core';
   import { AppModule } from './app.module';
   import { join } from 'path';
   
   async function bootstrap() {
     const app = await NestFactory.create(AppModule);
     const isDev = process.env.NODE_ENV === 'development';
     // 自动适配开发/构建后的资源目录
     const assetsDir = isDev 
       ? join(__dirname, '..', 'assets') 
       : join(__dirname, 'assets');
     // 设置统一的访问前缀
     app.useStaticAssets(assetsDir, { prefix: '/assets/' });
     await app.listen(3000);
   }
   bootstrap();
   

2. 代码里直接用绝对前缀路径：

   doc.image('/assets/logo.jpg')
   

   不管开发还是部署，都通过/assets前缀访问，NestJS会自动映射到对应实际目录。

方案三：Nx路径别名简化引用 #

1. 在tsconfig.base.json里添加路径别名：

   "compilerOptions": {
     "paths": {
       "@assets/*": ["apps/service/src/assets/*"]
     }
   }
   

2. 代码里用别名引用图片：

   import logoPath from '@assets/logo.jpg';
   doc.image(logoPath);
   

   注意：要确保project.json的assets配置正确把资源复制到dist目录，如果报表工具需要实际文件路径，可结合方案一的环境判断转换别名路径。

验证步骤 #

• 开发环境：执行nx run service:serve，检查报表图片加载状态
• 构建部署：执行nx run service:build，启动dist目录中的服务，验证图片正常显示

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