部署到Vercel后NestJS Swagger UI样式加载失败求助

问题描述 #

本地运行正常的NestJS项目部署到Vercel后，Swagger UI样式完全无法加载，控制台及网络请求出现资源加载失败报错：

当前已配置vercel.json并完成部署，配置内容如下：

{
  "version": 2,
  "builds": [
    {
      "src": "src/main.ts",
      "use": "@vercel/node"
    }
  ],
  "routes": [
    {
      "src": "/(.*)",
      "dest": "src/main.ts",
      "methods": ["GET", "POST", "PUT", "PATCH", "DELETE"]
    }
  ]
}

main.ts中的Swagger配置（使用@nestjs/swagger v6）：

const swaggerConfig = new DocumentBuilder()
  .setTitle('Tansfun')
  .setDescription('API for Tansfun')
  .setVersion('1.0')
  .addBearerAuth(
    {
      type: 'http',
      scheme: 'bearer',
      bearerFormat: 'APIKey',
      name: 'APIKey',
      description: 'Enter API Key',
      in: 'header',
    },
    'APIKey-auth', 
  )
  .build();

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  const document = SwaggerModule.createDocument(app, swaggerConfig);
  app.useGlobalPipes(new ValidationPipe());

  SwaggerModule.setup('api', app, document);

  await app.listen(port);
}
bootstrap();

问题原因 #

Vercel当前的路由规则将所有请求都转发到src/main.ts，但Swagger UI依赖的静态资源（CSS、JS文件）路径为/api-assets/开头，这类请求需要由NestJS的Swagger模块直接处理，而非和普通API请求一样被转发，导致资源加载路径错误，样式无法正常渲染。

解决方案 #

修改vercel.json的路由配置，优先匹配Swagger静态资源的请求，确保这类请求能被正确处理：

{
  "version": 2,
  "builds": [
    {
      "src": "src/main.ts",
      "use": "@vercel/node"
    }
  ],
  "routes": [
    // 优先匹配Swagger静态资源请求
    {
      "src": "/api-assets/(.*)",
      "dest": "src/main.ts"
    },
    // 其他API请求规则
    {
      "src": "/(.*)",
      "dest": "src/main.ts",
      "methods": ["GET", "POST", "PUT", "PATCH", "DELETE"]
    }
  ]
}

原理说明 #

Vercel的路由匹配是从上到下按顺序执行的，新增的规则会先拦截/api-assets/开头的请求，让这些静态资源请求直接进入NestJS应用，由Swagger模块处理资源返回，从而解决样式加载失败的问题。

修改完成后重新部署到Vercel，访问Swagger UI页面（默认路径/api）即可看到样式正常加载。

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