NestJs Swagger 如何添加自定义图标

Question

我正在尝试将自定义图标添加到我的 NestJs 文档中。 但是，我对如何解析路径文件有点迷茫，不知道如何实现这一点。

我正在使用 nestjs/swagger 模块版本 3.1.0 并尝试在初始化 Swagger 模块时像这样传递路径文件。

我的main.ts文件

SwaggerModule.setup('/v1/docs', app, document, {
    customCss: CUSTOM_STYLE,
    customSiteTitle: 'My API Documentation',
    customfavIcon: './public/favicon.jpg'
});

搜索了 github 问题，没有发现任何有用的东西。 正如您从代码中看到的那样，我能够修改 CSS styles，但我不知道如何自定义网站图标。

感谢任何帮助

Answer 1

我已使用以下命令将自定义图标添加到我的 swagger 文档中：

您首先要确定的是，在您的main.ts中，应用程序使用以下内容进行初始化：

const app: NestExpressApplication = await NestFactory.create(...)

要提供 static 内容，您必须使用NestExpressApplication初始化您的应用程序。

接下来是允许 Nest 应用程序在初始化后使用main.ts中的以下内容查找公共内容：

app.useStaticAssets(join(__dirname, '..', 'public'));

此外，在应用程序的根目录中创建一个公共目录并将favicon.jpg文件粘贴到其中。

现在是时候在 main.ts 中初始化main.ts

SwaggerModule.setup('/v1/docs', app, document, {
    customCss: CUSTOM_STYLE,
    customSiteTitle: 'My API Documentation',
    customfavIcon: '../favicon.jpg'
});

如果我们的../favicon.jpg位于应用程序根目录的src文件夹中，您必须提供应用程序根目录的相对路径，例如main.ts 。

Answer 2

替代解决方案，只需托管您的网站图标并使用外部 url 引用它

  SwaggerModule.setup('api', app, getSwaggerDocument(app), {
    ...
    customfavIcon:
      'https://[your-bucket-url].com/.../anything.png',
  });

Answer 3

为了迭代 pravindot17 的答案，现在有@nestjs/serve-static package 用于托管 static 文件。 这避免了我们对 Nest.js 客户端进行类型转换并依赖于我们正在运行 Express 支持的 Nest.js 服务器的隐含假设。

安装 package 后，将其挂接到src/app.module.ts中。 此配置要求项目的根目录有一个/public/文件夹，您可以在其中存储 static 资产。

import { Module } from '@nestjs/common';
import { ServeStaticModule } from '@nestjs/serve-static';
import { join } from 'path';

@Module({
  imports: [
    // Host static files in ../public under the /static path.
    ServeStaticModule.forRoot({
      /**
       * Config options are documented:
       * https://github.com/nestjs/serve-static/blob/master/lib/interfaces/serve-static-options.interface.ts
       */
      rootPath: join(__dirname, '..', '..', 'public'),
      serveRoot: '/static',
    }),
    // ... 
})
export class AppModule {}

现在我自己的偏好是使用绝对路径而不是相对路径，因为它使其独立于我们选择的用于托管 API 文档的路径。

SwaggerModule.setup('/v1/docs', app, document, {
    customfavIcon: '/static/favicon.jpg'
});

最后要注意的是，此配置从/static/*托管 static 文件，这样做是为了防止 API 调用不存在的端点向最终用户显示无法找到 ZA81259CEF8E659C6274DF1D45 文件的错误消息。

否则，不存在的端点上的所有 404 将类似于：

{"statusCode":404,"message":"ENOENT: no such file or directory, stat '/Users/me/my-project/public/index.html'"}