适用场景

适用于使用 Vue 2 和模块打包器的业务工程。

前置条件

项目已能运行 Vue 2，且能从团队配置的软件源安装 bee-report。当前代码没有给出可据以承诺的 Vue 小版本门槛，请以项目锁定版本和发布说明为准。

最小可运行示例

先安装包：

npm install bee-report

组件中同时引入 API 和样式，并在 Vue 2 生命周期中成对挂载、卸载：

<template>
  <div ref="report" class="report-host"></div>
</template>

<script>
import Vue from "vue";
import { api } from "bee-report";
import "bee-report/es/index.css";

export default {
  async mounted() {
    try {
      this.reportInstance = await api.mount(
        {
          reportOptions: {
            reportCode: "sales-summary",
            reportVersion: "1.0.0",
            mode: 2,
          },
        },
        this.$refs.report,
        Vue,
      );
    } catch (error) {
      console.error("BeeReport mount failed", error);
    }
  },
  beforeDestroy() {
    api.unmount(this.$refs.report);
  },
};
</script>

<style scoped>
.report-host { height: 640px; }
</style>

接入步骤

安装 bee-report，不要混用另一个页面注入的未知版本。
引入 api 和 CSS，创建尺寸明确的容器。
在 mounted 中调用 api.mount(options, container, Vue) 并等待 Promise。
在 beforeDestroy 中用同一容器调用 api.unmount(container)。
按需加入 serviceInputs 或 injectReportScope，参数定义见 reportOptions。

成功验证

Promise resolve 后页面显示 sales-summary，刷新数据请求无 4xx/5xx；离开路由后 iframe、Vue 实例或容器内报表节点被移除，再进入页面只出现一个实例。

常见问题

602：第三参没有传入 Vue，且 window.Vue 也不存在。显式传入项目使用的 Vue 构造器。
页面空白：检查容器高度、CSS 是否引入以及报表服务请求。
重复渲染：确认 beforeDestroy 使用的 DOM 节点与 mount 完全相同。

NPM 与 Vue 2 集成