1.下载activiti前端代码放到public文件夹下
地址：👇👇👇👇

https://github.com/Funnyman-S/spring-boot-with-activiti-modeler/tree/master/src/main/resources/public

2.新建activiti组件

<template>
  <div style="position:relative;height: 100%;">
    <iframe
        id="iframe"
        :src="modelerUrl"
        frameborder="0"
        width="100%"
        height="720px"
        scrolling="auto"
    />
<!--    <Spin v-if="modelerLoading" fix size="large" />-->
  </div>
</template>

<script>
import { getToken } from '@/utils/auth'
export default {
  name: 'ModelDefine',
  components: {},

  data() {
    return {
      modelerLoading: true,
      modelerUrl: ""
    }
  },
  computed: {
    token() {
      return sessionStorage.getItem('adminToken')
    },
    apiUrl(){
      return process.env.VUE_APP_BASE_API+'/activiti';//后台部署的api服务
    },
  },
  created() {},
  mounted() {
    window.getMyVue = this
  },
  methods: {
    getModelEvent(modelId){
      console.log('modelId', modelId)
      this.modelerUrl = `/static/modeler.html?modelId=${modelId}`
    },
  }
}
</script>
<style lang="scss" scoped>
.iframe {
  width: 100%;
  height: calc(100vh - 154px);
}
</style>

3.找到activiti前端modeler.html文件,加上这段代码

<script>
    (
      function (open) {
        XMLHttpRequest.prototype.open = function (method, url, async, user, pass) {
          open.call(this, method, url, async, user, pass);//this指XMLHttpRequest
          // 这里的setRequestHeader主要设置请求头
          this.setRequestHeader("token", window.parent.getMyVue.token);//mounted时传入的token
        };
      }
    )(XMLHttpRequest.prototype.open);
  </script>

4.找到app-cfg.js文件，修改接口地址（本地调试就用代理地址）

'use strict';
 
var ACTIVITI = ACTIVITI || {};
 
ACTIVITI.CONFIG = {
  'contextRoot': window.parent.getMyVue.apiUrl, // vue文件中自己定义的代理地址，比如vue.config.js中的代理"apis"
 // window.parent.getMyVue.apiUrl是activiti组件挂载的接口地址
};

1.打开页面显示不出样式，获取不到资源：检查路径是否正确，modeler.html下面的js、css资源是否可以获取到。

2./model/xxxxxxx/json接口 请求文件报错，找到请求位置，检查路径是否正确,或者是后端接口问题.

3.渲染不出流程图，modelId是必带的参数, modelId是新建模型以后后端给你返回的, 必须要新建一个模型,才会有modelId. 

最后就是这个样子, 左侧 (启动时间,活动列表,网关列表 …)这些节点是后端返回的, 正常来讲都是 /stencilset 这个接口, 可以让后端修改, 返回所需要的节点, 去除多余节点.