如何导出与swagger-editor右侧预览效果一致的交互式独立swagger文档

完全可以实现，两种常用方案如下，最终输出的文档功能、样式都和swagger-editor右栏展示效果完全一致：

方案1：打包静态站点（可直接本地打开/部署到任意静态服务器） #

• 从swagger-editor顶部菜单栏导出你编辑完成的OpenAPI规范文件，支持yaml或json格式
• 获取官方SwaggerUI静态资源包，将你导出的规范文件放入资源包根目录，建议重命名为openapi.yaml或openapi.json
• 编辑资源包中的swagger-initializer.js文件，修改初始化配置的url参数为你的规范文件名，参考配置如下：

window.onload = function() {
  window.ui = SwaggerUIBundle({
    url: "openapi.yaml",
    dom_id: '#swagger-ui',
    deepLinking: true,
    presets: [
      SwaggerUIBundle.presets.apis,
      SwaggerUIStandalonePreset
    ],
    layout: "StandaloneLayout"
  });
};

• 调整完成后整个资源包就是独立的交互式文档，本地直接打开根目录的index.html即可使用，也可以部署到任意静态文件服务供其他人访问。如果需要完全对齐swagger-editor的样式，可以将swagger-editor引用的SwaggerUI CSS文件替换当前资源包中的对应CSS文件即可。

方案2：构建独立docker镜像（适合容器化部署） #

• 同上先导出你的OpenAPI规范文件，命名为openapi.yaml，放在空文件夹中
• 同目录新建Dockerfile，内容如下：

FROM swaggerapi/swagger-ui
COPY openapi.yaml /usr/share/nginx/html/openapi.yaml
ENV URL=openapi.yaml

• 执行镜像构建命令：docker build -t my-custom-api-docs .
• 运行命令启动文档服务：docker run -p 8080:80 my-custom-api-docs，访问127.0.0.1:8080即可看到和swagger-editor右栏完全一致的交互式文档，该镜像可以任意迁移、部署到支持docker的环境。

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