我想使用swagger-ui在本地计算机上打开自己生成的Swagger规范文件my.json。
因此，我下载了最新的标记v2.1.8-M1并解压缩了ZIP文件。然后我进入子文件夹dist并将文件my.json复制到其中。现在我打开了index.html并想要探索my.json。这里问题开始出现：
index.html的当前URL为前缀。因此我无法打开我的文件。我尝试了以下所有组合但都没有成功:
my.json导致file:///D:/swagger-ui/dist/index.html/my.jsonfile:///D:/swagger-ui/dist/my.json导致file:///D:/swagger-ui/dist/index.html/file:///D:/swagger-ui/dist/my.json我无法让Adam Taras的答案生效（即使用相对路径 ../my.json ）。
以下是我的解决方案（如果您安装了Node，则非常快速且无痛苦）：
npm install -g http-serverhttp-server --cors（必须启用CORS才能工作）http：//localhost:8080/my.json，然后单击“Explore”--cors参数。我将其与连接到http-server的docker镜像一起使用，完美地解决了问题。再次感谢。 - Darrenhttp-server --cors -a 127.0.0.1，以防止其他人在网络上浏览您的目录索引。 - Ben Whaley使用spec参数。
以下是说明。
在与index.html（/dist/）相同的目录中创建一个新的javascript文件。
然后插入spec变量声明：
var spec =
然后将swagger.json文件内容粘贴在后面。它不需要与=符号在同一行。
示例：
var spec =
{
"swagger": "2.0",
"info": {
"title": "I love Tex-Mex API",
"description": "You can barbecue it, boil it, broil it, bake it, sauté it. Dey's uh, Tex-Mex-kabobs, Tex-Mex creole, Tex-Mex gumbo. Pan fried, deep fried, stir-fried. There's pineapple Tex-Mex, lemon Tex-Mex, coconut Tex-Mex, pepper Tex-Mex, Tex-Mex soup, Tex-Mex stew, Tex-Mex salad, Tex-Mex and potatoes, Tex-Mex burger, Tex-Mex sandwich..",
"version": "1.0.0"
},
...
}
}
这是一个像Ciara一样的两步操作。
修改/dist/index.html文件以包括外部spec.js文件。
<script src='spec.js' type="text/javascript"></script>
例子：
<!-- Some basic translations -->
<!-- <script src='lang/translator.js' type='text/javascript'></script> -->
<!-- <script src='lang/ru.js' type='text/javascript'></script> -->
<!-- <script src='lang/en.js' type='text/javascript'></script> -->
<!-- Original file pauses -->
<!-- Insert external modified swagger.json -->
<script src='spec.js' type="text/javascript"></script>
<!-- Original file resumes -->
<script type="text/javascript">
$(function () {
var url = window.location.search.match(/url=([^&]+)/);
if (url && url.length > 1) {
url = decodeURIComponent(url[1]);
} else {
url = "http://petstore.swagger.io/v2/swagger.json";
}
修改SwaggerUi实例以包括spec参数：
window.swaggerUi = new SwaggerUi({
url: url,
spec: spec,
dom_id: "swagger-ui-container",
npm，并保留了本地托管 dist/ 文件夹的能力，这是整个过程的关键点。 - syvex经过一番努力，我找到了一个更好的解决方案。
创建一个名为swagger的目录
mkdir C:\swagger
如果你使用 Linux 操作系统，请尝试执行以下操作：
mkdir /opt/swagger
使用以下命令获取Swagger编辑器：
git clone https://github.com/swagger-api/swagger-editor.git
cd swagger-editor
现在可以使用以下命令获取swagger-ui：
git clone https://github.com/swagger-api/swagger-ui.git
现在，复制你的 Swagger 文件，我复制到了以下路径：
./swagger-editor/api/swagger/swagger.json
所有设置都完成了，使用以下命令运行swagger-edit
npm install
npm run build
npm start
You will be prompted 2 URLs, one of them might look like:
http://127.0.0.1:3001/
上面是Swagger编辑器的网址
现在浏览至：
http://127.0.0.1:3001/swagger-ui/dist/
以上是Swagger-UI的URL。
就这些了。
现在，您可以从swagger-ui或swagger-editor中查看文件。
安装/构建需要时间，但一旦完成，将会有很好的结果。
我大约花了两天的时间来解决问题，一次性安装只需约5分钟。
现在，在右上角，您可以浏览到您的本地文件。
祝你好运。
./docs/specs/openapi.yml的本地目录中，你可以运行以下命令来启动容器并访问规范：http://127.0.0.1:8246。请注意保留HTML标签。docker run -t -i -p 8246:8080 -e SWAGGER_JSON=/var/specs/openapi.yml -v $PWD/docs/specs:/var/specs swaggerapi/swagger-ui
$PWD替换为%cd%。 - erncyp$PWD也可以在Windows上工作。 - Moritz如果你只想在swagger UI中查看swagger文档文件（例如swagger.json），可以尝试open-swagger-ui（本质上是在swagger UI中打开）。
open-swagger-ui ./swagger.json --open
最好的方法是输入相对路径或绝对路径，不需要添加 file:// 协议：
../my.json 导向 file:///D:/swagger-ui/dist/index.html/../my.json 并且可以正常工作。/D:/swagger-ui/dist/my.json 导向 file:///D:/swagger-ui/dist/my.json 并且可以正常工作。提示
这个答案适用于在Win7上使用Firefox。对于Chrome浏览器，请参见下面的评论：
我曾遇到过这个问题，这里有一个更简单的解决方案：
将dist/index.html中的默认petstore url替换为您的localhost/api-docs或者更通用地替换为：
location.protocol+'//' + location.hostname+(location.port ? ':' + location.port: '') + "/api-docs";
再次访问localhost/swagger-ui
瞧！您的本地swagger实现已经准备好了。
我使用以下 Node.js 工具成功加载了本地的swagger.json规范，整个过程只需要5分钟即可完成：
按照以下步骤操作：
swagger.json规范复制到这个新建的文件夹中。.js的文件，例如我命名为swagger-ui.js，并将以下内容复制并保存到这个swagger-ui.js文件中。const express = require('express')
const pathToSwaggerUi = require('swagger-ui-dist').absolutePath()
const app = express()
// this is will load swagger ui
app.use(express.static(pathToSwaggerUi))
// this will serve your swagger.json file using express
app.use(express.static(`${__dirname}`))
// use port of your choice
app.listen(5000)
npm install express和npm install swagger-ui-distnode swagger-ui.js运行express应用程序http://localhost:5000，这将使用默认URL加载Swagger UI，该URL为https://petstore.swagger.io/v2/swagger.jsonhttp://localhost:5000/swagger.json替换上述默认URL，并单击“Explore”按钮，这将从本地JSON文件加载Swagger规范您可以根据自己的便利使用文件夹名称、JSON文件名、静态公共文件夹来服务swagger.json，端口号
这不是一个答案，只是对paragbaxi的回答进行了小更新，请点赞原始答案而不是这个。
paragbaxi的解决方案在2021年仍然像魅力一样运行。
以下是最新openapi=3.0.2的完整index.html：
<!-- HTML for static distribution bundle build -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Swagger UI</title>
<link rel="stylesheet" type="text/css" href="./swagger-ui.css" />
<link rel="icon" type="image/png" href="./favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="./favicon-16x16.png" sizes="16x16" />
<style>
html
{
box-sizing: border-box;
overflow: -moz-scrollbars-vertical;
overflow-y: scroll;
}
*,
*:before,
*:after
{
box-sizing: inherit;
}
body
{
margin:0;
background: #fafafa;
}
</style>
</head>
<body>
<div id="swagger-ui"></div>
<script src='spec.js' type="text/javascript"></script>
<script src="./swagger-ui-bundle.js" charset="UTF-8"> </script>
<script src="./swagger-ui-standalone-preset.js" charset="UTF-8"> </script>
<script>
window.onload = function() {
// Begin Swagger UI call region
const ui = SwaggerUIBundle({
spec: spec,
dom_id: '#swagger-ui',
deepLinking: true,
presets: [
SwaggerUIBundle.presets.apis,
SwaggerUIStandalonePreset
],
plugins: [
SwaggerUIBundle.plugins.DownloadUrl
],
layout: "StandaloneLayout"
});
// End Swagger UI call region
window.ui = ui;
};
</script>
</body>
</html>