jointjs +vue +vite 引起的本地流程图可正常画出，放到测试环境就报错的问题

问题：之前项目未使用vite，使用的时webpack模式，所以joint画的模块在本地和线上是可以正常使用，项目更新未使用vite之后，就出现了问题

原因：由于项目中的流程节点需要自定义，所以在joint.shapes上自定义一个类型，如 joint.shapes.flow = {},接着在flow中增加我们的节点类型，本地是可以将flow属性增加到shapes上的，但是vite打包之后是无法添加上去，这个就是根本原因

 

原始代码

import * as joint from 'jointjs';

joint.shapes.flow = {};

export const fGeneral = (type, data) => {
  return joint.shapes.basic.Generic.extend({
    markup:
      '<g class="rotatable">\n  <g class="inPorts"/><g class="outPorts"/>\n  <g class="scalable"></g>\n  <rect class="background"/>\n  <rect class="color-band"/>\n  <g class="icon"><image/></g>\n  <text class="title"/>\n <text class="message"/>\n   <g class="error"><image/></g>\n  <g class="btn btn-code"><image/></g>\n</g>\n',
    defaults: joint.util.defaultsDeep(
      {
        id: type,
        type: 'flow.Start',
        size: { width: 80, height: 54 },
        attrs: {自已的定义},
        ports: {自己的定义},
        position: { x: data.posX, y: data.posY }
      },
      joint.shapes.basic.Rect.prototype.defaults
    ),
    initialize: function() {
      joint.shapes.basic.Rect.prototype.initialize.apply(this, arguments);
    }
  });
};

joint.shapes.flow.Start= fGeneral();

export const createStart=(data)=>{

   return new joint.shapes.flow.Start({});

};

 

在需要的位置，调用createStart方法

 

解决问题 - 根本是不挂载在shapes上

import * as joint from 'jointjs';

joint.shapes.flow = {};

export const fGeneral = (type, data) => {
  const result = joint.shapes.basic.Generic.extend({
    markup:
      '<g class="rotatable">\n  <g class="inPorts"/><g class="outPorts"/>\n  <g class="scalable"></g>\n  <rect class="background"/>\n  <rect class="color-band"/>\n  <g class="icon"><image/></g>\n  <text class="title"/>\n <text class="message"/>\n   <g class="error"><image/></g>\n  <g class="btn btn-code"><image/></g>\n</g>\n',
    defaults: joint.util.defaultsDeep(
      {
        id: type,
        type: 'flow.Start',
        size: { width: 80, height: 54 },
        attrs: {自已的定义},
        ports: {自己的定义},
        position: { x: data.posX, y: data.posY }
      },
      joint.shapes.basic.Rect.prototype.defaults
    ),
    initialize: function() {
      joint.shapes.basic.Rect.prototype.initialize.apply(this, arguments);
    }
  });
  return new result();
};

export const createStart=(data)=>{
   return fGeneral("Start",data,"");
};

在需要的位置，调用createStart方法