ruoyi-vue-plus 集成swagger ui
时间: 2025-01-03 12:23:00 浏览: 362
### RuoYi-Vue-Plus 中集成 Swagger UI
对于 `RuoYi-Vue-Plus` 项目而言,由于官方已经决定不再支持Swagger-UI而转向其他解决方案如ApiFox[^2],如果仍然希望在该项目中集成Swagger UI,则需要采取一些额外措施。
#### 方法一:通过自定义配置重新引入Swagger-UI
1. **安装依赖**
需要先添加Swagger-UI的相关依赖。可以通过npm或yarn来完成:
```bash
npm install swagger-ui-dist --save
```
2. **创建Swagger入口文件**
在项目的静态资源目录下新建一个HTML文件作为Swagger访问页面,在该文件内加载swagger-ui库并初始化Swagger实例:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Swagger UI</title>
<!-- 引入样式 -->
<link rel="stylesheet" href="/node_modules/swagger-ui-dist/swagger-ui.css"/>
</head>
<body>
<div id="swagger-ui"></div>
<!-- 加载脚本 -->
<script src="/node_modules/swagger-ui-dist/swagger-ui-bundle.js"> </script>
<script>
const ui = SwaggerUIBundle({
url: "http://localhost:8080/api-docs", // API 文档地址
dom_id: '#swagger-ui',
deepLinking: true,
presets: [
SwaggerUIBundle.presets.apis,
SwaggerUIStandalonePreset
],
plugins: [
SwaggerUIBundle.plugins.DownloadUrl
]
})
</script>
</body>
</html>
```
3. **调整后端API文档生成插件设置**
如果之前使用的是knife4j等增强版Swagger组件,可能还需要修改对应的Maven或Gradle构建脚本来确保能够正常生产标准格式的OpenAPI/Swagger JSON/YAML描述文件供前端调用[^1]。
#### 方法二:利用第三方服务托管API文档
考虑到维护成本和技术栈兼容性问题,也可以考虑将API文档迁移到专门的服务平台上去管理,比如上述提到过的ApiFox工具。这种方式不仅可以解决当前版本不自带Swagger的问题,还能获得更好的团队协作体验和服务保障。
阅读全文
相关推荐

















