如何修改Swagger-UI dist包的默认端口？

没问题，这种需求完全可行，而且配置起来一点都不复杂！你当前用http-server来运行静态的Swagger-UI dist包，只要给http-server指定端口参数就能搞定所有问题，不需要对Swagger-UI本身做任何复杂修改。

一、修改单个实例的默认端口 #

你有两种简单的方式修改端口：

1. 直接修改package.json的启动脚本
   打开你的package.json，把scripts里的start命令改成带端口参数的形式，比如要改成8081端口：

   {
     "name": "dist",
     "version": "1.0.0",
     "description": "",
     "main": "swagger-ui-bundle.js",
     "scripts": {
       "start": "http-server -p 8081"
     },
     "keywords": [],
     "author": "",
     "license": "ISC"
   }
   

   之后运行npm start就会监听8081端口了。

2. 启动时临时指定端口
   如果你不想固定package.json里的端口，每次启动时可以通过额外参数指定：

   npm start -- -p 8082
   

   这种方式适合临时切换端口，不用修改配置文件。

二、同一主机运行多个dist实例（不同端口） #

这也非常容易实现，核心就是给每个http-server实例分配不同的端口就行，有两种常用方式：

1. 多终端分别启动
   打开多个终端窗口，每个窗口进入你的dist目录，分别运行不同端口的启动命令：

   • 终端1：npm start -- -p 8080
   • 终端2：npm start -- -p 8081
   • 终端3：npm start -- -p 8082
     这样三个实例就会同时监听不同的端口，相互之间不会冲突。

2. 在package.json中配置多个启动脚本
   如果你想更方便管理，可以在package.json里添加多个带不同端口的启动命令：

   {
     "scripts": {
       "start:8080": "http-server -p 8080",
       "start:8081": "http-server -p 8081",
       "start:8082": "http-server -p 8082"
     }
   }
   

   之后分别运行对应的命令就能启动不同端口的实例：

   npm run start:8080
   npm run start:8081
   

补充说明 #

因为Swagger-UI的dist包是纯静态资源，http-server只是负责把这些静态文件提供给浏览器，只要每个服务器实例监听的端口不同，就可以在同一主机上同时运行多个实例，完全不需要对Swagger-UI本身做复杂配置。如果每个实例需要展示不同的API文档，你只需要复制多份dist目录，修改每份里的swagger-initializer.js文件指向不同的OpenAPI配置即可。

内容的提问来源于stack exchange，提问作者Souciance Eqdam Rashti