acitiviti嵌入到vue项目（已解决！！）

首先感谢这两位博主的文章
@JkingCn @ Beq
文章地址1 ：

https://blog.csdn.net/weixin_39161276/article/details/103044129#comments_13011910

文章地址2：

https://blog.csdn.net/qq_34067556/article/details/99695685?utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2_allsobaiduend~default-2-99695685.nonecase&utm_term=vue%E6%95%B4%E5%90%88activiti&spm=1000.2123.3001.4430

遇到了和两位博主一样的坑，逐一解决就行！

背景： 将activity的前端代码整合到现有的vue项目中。

步骤：

• 1. 新建vue页面， 使用iframe来盛放这个activity
• 2. iframe总得需要个src, 这个src来源activiti的入口文件 （我的是 modeler.html， 查阅资料时，发现有的是 model.html）大致是这样的一个文件（文件特点“”引入了一大堆的js文件）。
• • 

• 2.1 此处文件存放的位置有坑（居其他博主所说，我没踩坑）。就是activity静态文件所放的位置是 public下的static。

3. 回到新建的那个vue页面

<template>
  <div>
    <iframe :src="src" frameborder="0">iframe>
  div>
template>
<script>
import { getModelId } from '@/api/activityApi'
export default {
  data () {
    return {
      modelId: '',
      iframeUrl: ''
    }
  },
  computed: {
    src () {
      return './static' + '/modeler.html?modelId=' + this.modelId
    },
    apiUrl () {
      return process.env.VUE_APP_BASE_API + '/***/***' // 后台部署的api服务
    }
    // token(){
    // return getToken();//token
  },
  mounted () {
    window.getMyVue = this // 全局存入当前vue实例，供activiti调用
    //   获取 modelId
    getModelId()
      .then((res) => {
        this.modelId = res
      })
      .catch((err) => {
        console.log(err)
      })
  }
}
script>
<style lang="less" scoped>
iframe {
  width: 100%;
  min-height: calc(100vh - 80px);
}
style>

• 4. mounted时将this，即vuecompoennt对象赋值给iframe，这样可以在保存后进行页面切换，或者某个接口回调后控制vue界面的状态。

mounted(){
    window.getMyVue = this;//全局存入当前vue实例，供activiti调用
}

• 5. 在上面的那个modeler.html（入口文件） 添加下面这个自运行方法

<script>
   (
    function(open){
    XMLHttpRequest.prototype.open = function(method,url,async,user,pass){
        open.call(this,method,url,async,user,pass);//this指XMLHttpRequest
        this.setRequestHeader("token",window.parent.getMyVue.token);//mounted时传入的token
    }
	}
	)(XMLHttpRequest.prototype.open)

6. //修改activiti中app-cfg改变调用地址

var ACTIVITI = ACTIVITI || {};
ACTIVITI.CONFIG = {
    contextRoot:(function(){
    return window.parent.getMyVue.apiUrl;//上一步将vue实例传入的父窗口
    })()
}
 

• 7 报错

TypeError: Cannot read property 'split' of undefined
at Object.ORYX.Core.StencilSet.stencilSet 
at oryx.debug.js:8619

大神说是前端请求头Accept的值有问题，应该设置为application/json, text/plain, */*才对

所以找到路径editor-app/libs/prototype-1.5.1.js

搜 Accept设置为我们想要的 （管他是啥， 改就完事了 改成 application/json, text/plain, /）
然后就行了， 也没有报错。 network里 没红。

只是大致总结下 摸索的过程 ，不会写文档，大致就是这个流程，去看上面两大神的文章就行了， 干就完事了!!!

修改1：保存的时候， 遇到一个问题 保存的时候没保存上： 注意修改
$scope.save = function (successCallback) ｛
$http({ method: ‘PUT’,
data: params,
ignoreErrors: true,
headers: {‘Accept’: ‘application/json’,
‘Content-Type’: ‘application/x-www-form-urlencoded; charset=UTF-8’ // 这里可能要改一下
},
｝