Vue项目导入jKanban库报错：Cannot set property 'jKanban' of undefined

问题根源分析 #

你遇到的Cannot set property 'jKanban' of undefined报错，本质是因为jKanban的源码写法依赖全局环境的this（浏览器环境下就是window对象），但Vue组件的<script>是ES模块，模块作用域里的this是undefined。当库的自执行函数(function () { this.jKanban = function () { ... } })()执行时，this指向undefined，自然就会报错。而在非Vue环境下，你应该是通过<script>标签直接引入，此时自执行函数的this指向window，所以能正常挂载jKanban到全局。

三种可行解决方案 #

方案1：全局引入（最简单，无需修改库源码）

把jKanban.js放到项目的public目录下，然后在public/index.html中通过<script>标签引入：

<!-- public/index.html -->
<script src="<%= BASE_URL %>jKanban.js"></script>

之后在Vue组件的mounted钩子中，直接通过window.jKanban实例化：

<template>
  <div id="kanban"></div>
</template>

<script>
export default {
  mounted() {
    // 实例化jKanban，配置项根据你的需求填写
    new window.jKanban({
      element: '#kanban',
      boards: [
        {
          id: 'board1',
          title: '待办',
          items: [{ title: '任务1' }]
        }
        // 更多看板配置...
      ]
    })
  }
}
</script>

方案2：修改jKanban源码为ES模块格式

如果你想保持import的引入方式，可以修改库的源码，将原本的全局挂载写法改成模块导出：

// 修改后的jKanban.js
export default function jKanban(options) {
  var self = this;
  // 保留原库内部的所有代码逻辑...
}

然后在Vue组件中正常导入并实例化：

<template>
  <div id="kanban"></div>
</template>

<script>
import jKanban from '../components/jKanban.js'

export default {
  mounted() {
    new jKanban({
      element: '#kanban',
      // 你的配置项
    })
  }
}
</script>

方案3：修改库的自执行函数绑定全局对象

如果不想改成ES模块，也可以修改库的自执行函数，强制将jKanban挂载到window上：

// 修改后的jKanban.js
(function (global) {
  global.jKanban = function(options) {
    var self = this;
    // 保留原库内部的所有代码逻辑...
  }
})(window);

之后在Vue组件中导入后，通过window.jKanban实例化即可，和方案1的组件代码一致。

内容的提问来源于stack exchange，提问作者user11280819