NestjS - 生产模式下找不到 Swagger UI 的 CSS 资源

Question

我正在开发一个nestjs项目，我已经添加了swagger以显示我的端点。在开发模式下运行良好，但一旦使用https://zeit.co/（现在）部署到生产环境时，端点页面显示不正确（css丢失）。在网络选项卡中，我看到了以下错误：

/favicon-32x32.png:1 Failed to load resource: the server responded with a status of 404 ()
/favicon-16x16.png:1 Failed to load resource: the server responded with a status of 404 ()
swagger-ui.css:1 Failed to load resource: the server responded with a status of 404 ()

谢谢。请看以下链接：https://istack.dev59.com/T9IQv.webp

- Youness Houdass

---

需要更多信息。很可能是webpack（或您正在使用的任何打包程序）未包含CSS文件。这很可能是由于导入CSS文件或swagger-ui包的方式。就我上次使用swagger-ui的经验而言，默认情况下，您根本不需要手动包含CSS文件。 - jack.benson

我不太熟悉 zeit.co。你们是如何部署到生产环境的？这个过程和部署到开发环境有什么不同吗？当你提到开发环境时，是指本地运行还是部署到一个实际的开发服务器上？ - jack.benson

你找到解决方案了吗？ 我也遇到了同样的问题。 - jagdish

是的，有一个小技巧，可以查看我的先前回答。 - Youness Houdass

@YounessHoudass，你能发一个示例链接吗？我已经做了serve-static的事情，但在生产环境中仍然失败:( - Fran

Answer 1

我曾经遇到过类似的问题，我在这里分享了解决方案： https://dev59.com/MnoPtIcB2Jgan1zn3suU#74708365

请检查它是否回答了你的问题

- Rilla

Answer 2

你应该像这样添加自定义的CSS和JS文件：

SwaggerModule.setup('/swagger', app, swaggerDocument, {
    customCssUrl:
      'https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/4.15.5/swagger-ui.min.css',
    customJs: [
      'https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/4.15.5/swagger-ui-bundle.js',
      'https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/4.15.5/swagger-ui-standalone-preset.js',
    ],
});

- Manuchekhr Raupov

Answer 3

您需要在 SwaggerModule.setup 方法中提供额外的选项：

import { DocumentBuilder, SwaggerModule } from '@nestjs/swagger';

// some code...

const options = new DocumentBuilder()
  .setTitle('Your title')
  .setDescription('Your description')
  .setVersion('1.0')
  .build();
const document = SwaggerModule.createDocument(app, options);
SwaggerModule.setup('api', app, document, {
  customCssUrl: 'https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/4.15.5/swagger-ui.min.css',
});

- Maxim Solovyev