如何将Swagger-UI的[Explore]改为下拉菜单实现多应用快速切换？

你可以通过Swagger UI官方支持的urls配置项实现这个需求，无需修改源码，直接在初始化时配置多个API地址即可自动替换原有的单个输入框+Explore按钮为下拉菜单。

实现步骤 #

1. 找到Swagger UI的初始化代码（通常是SwaggerUIBundle的调用逻辑）
2. 在配置参数中添加urls数组，每个元素包含两个字段：
   • name: 下拉菜单中显示的API名称（比如你的应用名称）
   • url: 对应应用的OpenAPI规范文件地址
3. 可选：设置urls.primaryName指定默认加载的API

代码示例 #

const ui = SwaggerUIBundle({
  // 配置多个API选项
  urls: [
    { name: "用户管理应用API", url: "/openapi/user-app-spec.json" },
    { name: "订单处理应用API", url: "/openapi/order-app-spec.json" },
    { name: "支付服务应用API", url: "/openapi/payment-app-spec.json" }
  ],
  // 默认选中的API
  urls.primaryName: "用户管理应用API",
  dom_id: '#swagger-ui',
  deepLinking: true,
  presets: [
    SwaggerUIBundle.presets.apis,
    SwaggerUIStandalonePreset
  ],
  layout: "StandaloneLayout"
})

其他部署场景的配置方式 #

• 静态文件部署：直接修改Swagger UI的index.html中的初始化脚本，添加上述urls配置即可。
• Docker部署：通过环境变量SWAGGER_URLS传入JSON格式的API列表，示例：

  docker run -p 8080:8080 \
    -e SWAGGER_URLS='[{"name":"用户管理API","url":"/openapi/user.json"},{"name":"订单API","url":"/openapi/order.json"}]' \
    swaggerapi/swagger-ui
  

注意事项 #

确保每个API的OpenAPI规范地址可以被Swagger UI正常访问，若存在跨域问题，需要在API服务端配置CORS允许Swagger UI的域名请求。

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