ruoyi-vue-plus4.X版本实现内嵌swagger文档（简单解决方法）

卫庄大人℡

已于 2024-03-04 11:33:27 修改

阅读量1.6k

点赞数 8

文章标签： vue.js 前端 javascript

于 2024-03-04 11:31:46 首次发布

本文链接：https://blog.csdn.net/qq_45621643/article/details/136447582

版权

本文介绍了如何在Java项目中通过Mavenpom.xml添加SwaggerUI依赖，配置ResourceHandlers以正确加载UI资源，以及在前端Vue应用中嵌入iFrame展示API文档，并确保后端api-docs接口的访问和前端页面的接口路径配置，最后涉及系统菜单的设置。

摘要由CSDN通过智能技术生成

1.在common模块中添加pom依赖

        <dependency>
            <groupId>org.webjars</groupId>
            <artifactId>swagger-ui</artifactId>
            <version>4.15.5</version>
        </dependency>

结果如下：
在这里插入图片描述
2.在ResourcesConfig配置类的addResourceHandlers方法中添加swagger配置

    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/swagger-ui/**")
            .addResourceLocations("classpath:/META-INF/resources/webjars/swagger-ui/4.15.5/");
    }

在这里插入图片描述
3.前端代码文件添加

<template>
    <i-frame :src="url" />
</template>
  <script>
  import iFrame from "@/components/iFrame/index";
  export default {
    name: "Swagger",
    components: { iFrame },
    data() {
      return {
        url: process.env.VUE_APP_BASE_API + "/swagger-ui/index.html"
      };
    },
  };
  </script>