1.后端集成ureport

后端集成ureport2代码
localhost:8080/ureport/designer访问,端口号自己定义

2.Vue中添加

1.在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'
        }
      }

2.在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>

路由配置

3.如果打包nginx访问,需要配置nginx.conf文件

location /ureport/ {
		//端口号写自定义的端口号,微服务也可添加
		rewrite ^/(.*) http://127.0.0.1:8080/$1;
}