时间戳

首页 > 解决方案 > 为什么“从'datatables.net'导入数据表”可以在某些机器上工作，而在其他机器上不行？

javascript - 为什么“从'datatables.net'导入数据表”可以在某些机器上工作，而在其他机器上不行？

问题描述

我们有一个单文件 Vue 1.x 组件，它是数据表的包装器。它的基本原理如下所示：

<template>
...
</template>

<script>
import Vue from 'vue';
import $ from 'jquery';
import dataTables from 'datatables.net';
import dataTablesSelect from 'datatables.net-select';
import dataTablesColReorder from 'datatables.net-colreorder';
import dataTablesScroller from 'datatables.net-scroller';

const Table = Vue.extend({
    ...
    created() {
        $.fn.dataTable.ext.errMode = 'throw';
        ...
        this.dataTable = this.$table.DataTable(this.options);
    },
});
</script>

该组件是通过我们的 Webpack 配置编译的。

这工作得很好。最近我们一直在将代码库移植到 Vue 2.x。在我和我同事的机器上，移植的组件运行良好。但是，一旦它在我们的构建服务器上构建，使用相同的命令，它会在页面加载时抛出此错误：
TypeError: Cannot read property 'ext' of undefined
引用上面的行：
$.fn.dataTable.ext.errMode = 'throw';

看起来，当在我们的构建服务器上构建时，dataTables 实际上并没有正确导入。我可以确认它是导致问题的实际生成的 app.js，因为下载它并在本地运行它会产生相同的错误。我已经尝试了所有我能想到的匹配环境的方法，包括确保 node/npm 版本相同以及rm -rf设置 node_modules。然而，我们仍然反复得到相同的结果。

我不知道在哪里可以调试，诚然我并不精通 webpack 构建的机制。什么可能导致这似乎只适用于某些机器？

标签： javascriptjqueryvue.jsdatatables

解决方案

该错误意味着没有 $.fn.dataTable 对象。

发布您的 webpack 混合文件以及您如何使用 jQuery。我怀疑这里的外部/多个 jQuery 冲突，您导入一个 jQuery 并且 DataTable 在另一个 jQuery 上初始化。看看这是否有效。

// Right below your imports, initialize everything you imported
// this make sure fn.dataTable get initialized on the imported jQuery
// which is reference as $ in this case
dataTables(window, $);
dataTablesSelect(window, $);
dataTablesColReorder(window, $);
dataTablesScroller(window, $);

无耻的插件，请在此处查看我的包装器 - https://github.com/niiknow/vue-datatables-net - 它可能有助于让您更轻松。即使使用我的包装器，您仍然必须知道要在哪个 jQuery 上对其进行初始化。

推荐阅读