Vue下使用mxGraph(一)

liuxm_1218
5,890 阅读3分钟

vue环境下，在试验官网上的示例：userobject时，发现浏览器控制台报错：

TypeError: mxCellAttributeChange is not a constructor

检查配置

仔细检查了几遍我的配置如下：

  • 参照网上的做法，定义了Index.js，在其中引用mxGraph的相关对象。
import mx from 'mxgraph'
var mxgraph = require("mxgraph")({
  mxImageBasePath: "./src/images",
  mxBasePath: "./src"
})
window.mxGraph = mxgraph.mxGraph
window.mxGraphModel = mxgraph.mxGraphModel
window.mxEditor = mxgraph.mxEditor
window.mxGeometry = mxgraph.mxGeometry
window.mxDefaultKeyHandler = mxgraph.mxDefaultKeyHandler
window.mxDefaultPopupMenu = mxgraph.mxDefaultPopupMenu
window.mxStylesheet = mxgraph.mxStylesheet
window.mxDefaultToolbar = mxgraph.mxDefaultToolbar
window.mxCellAttributeChange = mxgraph.mxCellAttributeChange
export default mxgraph
  • .vue文件中已经引用了mxCellAttributeChange
import mxgraph from './Index'
const {mxGraph, mxClient, mxUtils, mxConstants, mxEvent, mxRubberband, mxKeyHandler, mxEdgeStyle, mxRectangle, mxCodec, mxGraphModel, mxForm, mxCellAttributeChange} = mxgraph

查看源文件

确认配置没有问题，接着通过看API和JS，发现mxCellAttributeChange是在

\node_modules\mxgraph\javascript\dist\js\model\mxGraphModel.js

中定义的，而且这个文件定义了很多对象，但并没有export，像mxCellAttributeChange、mxVisibleChange、mxGeometryChange、mxValueChange都会出现与我一样的问题。

自己对nodejs也不是很熟悉，只碰到过一个模块定义一个对象并导出的，没见过定义多个对象的，查了一圈资料，感觉定义了多个对象就应该导出多个，不然外部无法引用到。

查看官网的issue

mxGraphModel.js中定义了多个对象，但是没有导出，其它地方也用不了，隐约觉得有bug，自己跑到官网的issue下找了一圈，发现有几个相同的问题，见：#375、#175、#169。在npm环境下确实有bug，也有人给出了解决办法。

baidu里查了一圈，发现对我的问题有一定帮助的，只有这个作者的文章：懒牛不爱梳毛

最终办法是在vue.config.js中加入以下配置，我的项目是vue-cli创建的，手动新建了vue.config.js文件：

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('')
      .test(/mxClient\.js$/)
      .use('exports-loader')
      .loader('exports-loader?mxClient,mxToolbar,mxWindow,mxObjectCodec,mxGraphModel,mxActor,mxPopupMenu,mxShape,mxEventObject,mxGraph,mxPopupMenuHandler,mxPrintPreview,mxEventSource,mxRectangle,mxVertexHandler,mxMouseEvent,mxGraphView,mxCodecRegistry,mxImage,mxGeometry,mxRubberband,mxKeyHandler,mxDragSource,mxGraphModel,mxEvent,mxUtils,mxEvent,mxCodec,mxCell,mxConstants,mxPoint,mxGraphHandler,mxCylinder,mxCellRenderer,mxEvent,mxUndoManager,mxCellAttributeChange')
      .end()
  }
}

.vue文件中更改引入方式

import { mxGraph, mxCellAttributeChange } from 'mxgraph/javascript/mxClient'

出现新问题

满心欢喜的想着问题终于解决了，npm run serve运行，结果继续报错：

To install it, you can run: npm install --save mxgraph/javascript/mxClient

接下来又是查webpack下的exports-loader，chainWebpack配置和说明，各种的试验，还是不明白问题出在哪里。

第二天再仔细看上面提到baidu上的拿个文章，并翻看到另外一个配置篇，无意中看到以下内容：

安装exports-loader
cnpm install exports-loader --save
安装script-loader
cnpm install script-loader --save

果然问题解决，但是不明白为什么错误不提示要安装exports-loader！

总结一下

  1. mxgraph与vue的整合，见官网 但是当要用到mxValueChange、mxCellAttributeChange...等这些对象时，如果报错提示not a constructor，那可能就需要在vue.config.js中进行处理，vue文件中也要按照以上办法引入。

  2. 如果项目中要用到exports-loader或其它的loader，需要安装（直接敲npm install不会安装这些loader）。

以上是我在vue下尝试mxGraph时，碰到的问题和解决的过程，自己对nodejs、webpack、vue来说也是新手，有说的不对的地方欢迎指正。

avatar
文章
阅读
粉丝