acitiviti在前后端分离项目中，如何将acitiviti嵌入到vue等项目中并使用

在vue项目中嵌入acitiviti工作流心得：

acitiviti是一款在线流程设计器，但是它一般被使用在前后端分离的项目中，由于当前是vue项目，所以需要就部分前端页面代码嵌入项目当中，如下图结构，我将editor-app文件夹和modeler.html(后端之前做的前后端不分离所用的前端代码，acitiviti源码)：

 

步骤：

第一步：引入文件到静态目录public下；

第二步：在所需页面利用 <iframe>引入；

第三步：前端源码是用angular写的，可以先熟悉源码之后再进行改动从后端调接口获取modelId，全 局查找modelId，我是写在app.js line 185调取

第四步：解决报错问题，可能会有小坑，耐心一点（以下hack是我遇到的问题你可能也会遇到）

遇到的问题：

Hack 1，一定要在public目录下新建static（名字随意）文件夹，不能直接写在public根目录下，不然始终引入不了路径。因为之前在vue-cli2中静态文件是放在static下可以正常引入，但是vue-cli3中必须放在public里新建的static文件夹中这样才能正常显示html文件，src的根路径就是public。

Hack 2,找不到medelId,解决方案参照第三步调接口

Hack 3.控制台报错：

TypeError: Cannot read property 'split' of undefined

at Object.ORYX.Core.StencilSet.stencilSet (oryx.debug.js:8640)

at oryx.debug.js:8619

at prototype-1.5.1.js:446

at Array._each (prototype-1.5.1.js:672)

at Array.each (prototype-1.5.1.js:445)

at Object.ORYX.Core.StencilSet.stencilSets (oryx.debug.js:8618)

at classDef.getStencilSets (oryx.debug.js:11705)

at classDef._createCanvas (oryx.debug.js:11187)

at classDef.construct (oryx.debug.js:10921)

at classDef (oryx.debug.js:1747)

原因是stencilSet接口有问题，看返回报：We're sorry but xx doesn't work properly without JavaScript enabled，一开始以为是后端响应头Content-type的问题，其实不然，原来的前端请求头Accept的值有问题，应该设置为application/json, text/plain, */*才对，因为 new Ajax.Request()类是protype.js的，所以找到路径editor-app/libs/prototype-1.5.1.js 的line 1080 的Accept设置为我们想要的，如图

 

 

问题终于解决了，前端菜鸟自白，若有错误还请见谅。上图：