Ruoyi Vue前后端分离版本添加UReport设计器

1，在pom文件添加jar包

<!--添加ureport设计器-->
<dependency>
   <groupId>com.bstek.ureport</groupId>
   <artifactId>ureport2-console</artifactId>
   <version>2.2.9</version>
</dependency>

2，在启动程序*Application添加初始化bean

@Bean
public ServletRegistrationBean ureportServlet(){
    ServletRegistrationBean bean = new ServletRegistrationBean(new UReportServlet());
    bean.addUrlMappings("/ureport/*");
    return bean;
}

3，在SecurityConfig.java放行/ureport/**路径

.antMatchers("/ureport/**").anonymous()

4，这样就可以直接使用localhost:8080/ureport/designer浏览了

5，在vue项目里，在vue.config.js添加下列代码

devServer: {
    host: '0.0.0.0',
    port: port,
    proxy: {
      // detail: https://cli.vuejs.org/config/#devserver-proxy
      [process.env.VUE_APP_BASE_API]: {
        target: `http://localhost:8080`,
        changeOrigin: true,
        pathRewrite: {
          ['^' + process.env.VUE_APP_BASE_API]: ''
        }
      },
      '/ureport': {
        target: 'http://localhost:8080',//公司内部童鞋使用本地服务后端
        ws:false,
        changeOrigin: true,
        pathRewrite: {
          '^/ureport': '/ureport'
        }
      }

6.在views目录添加ureport/designer的index.vue文件，目录形式如下：views/ureport/designer

<template>
  <div v-loading="loading" :style="'height:'+ height">
    <iframe :src="src" frameborder="no" style="width: 100%;height: 100%" scrolling="auto" />
  </div>
</template>
<script>
  export default {
    name: "Ureport",
    data() {
      return {
        src: "/ureport/designer",
        height: document.documentElement.clientHeight - 94.5 + "px;",
        loading: true
      };
    },
    mounted: function() {
      setTimeout(() => {
        this.loading = false;
      }, 230);
      const that = this;
      window.onresize = function temp() {
        that.height = document.documentElement.clientHeight - 94.5 + "px;";
      };
    }
  };
</script>

7.在后台管理界面添加菜单，图片如下所示：

8.最后成功展示