Vue+Vite环境下DataTables生产构建失效问题求助

问题描述 #

在Vue3+Vite环境中使用DataTables时，开发环境（npm run dev）功能正常，但执行npm run build完成生产构建后，所有使用DataTables的页面均抛出错误：

Uncaught (in promise) TypeError: Cannot set properties of undefined (setting 'plugin-init')

报错来自混淆后的文件（如style-{random-identifier}.js或jquery.dataTables-{random-identifier}.js），触发错误的代码块如下：

b(document).on("plugin-init.dt", function(e, r) {
    var a = new ae(r)
      , i = "on-plugin-init"
      , s = "stateSaveParams." + i
      , f = "destroy. " + i;
    a.on(s, function(p, v, m) {
        for (var _ = v.rowIdFn, C = v.aoData, S = [], L = 0; L < C.length; L++)
            C[L]._detailsShow && S.push("#" + _(C[L]._aData));
        m.childRows = S
    }),
    a.on(f, function() {
        a.off(s + " " + f)
    });
    var h = a.state.loaded();
    h && h.childRows && a.rows(b.map(h.childRows, function(p) {
        return p.replace(/:/g, "\:")
    })).every(function() {
        ue(r, null, "requestChild", [this])
    })
});

环境与代码示例 #

• 环境版本：Laragon v6.0 220916、Vite v4.0、datatables.net v1.13.4、datatables.net-vue3 v2.0
• DataTables使用示例：

<script setup>
import DataTable from 'datatables.net-vue3'
import DataTablesLib from 'datatables.net';

defineProps({
    Invoices: JSON,
});

const columns = [{data: 'id', title: 'No.'}];
</script>

<template>
           <DataTable
             :data="Invoices"
             :columns="columns"
           ></DataTable>
</template>

• vite.config.js配置：

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue'
import tailwindcss from 'tailwindcss';
import { nodePolyfills } from 'vite-plugin-node-polyfills'

export default defineConfig({
    resolve: {
        alias: {
            'ziggy': '/vendor/tightenco/ziggy/src/js',
            'ziggy-vue': '/vendor/tightenco/ziggy/src/js/vue',
        },
    },
    plugins: [
        vue(),
        laravel([
            'resources/css/app.css',
            'resources/js/app.js',
        ]),
        nodePolyfills({
            protocolImports: true,
        }),
    ],
    css: {
        postcss: {
            plugins: [tailwindcss],
        },
    },
    define: { global: "globalThis" }
});

排查与解决方法 #

1. 开启SourceMap定位原报错位置 #

生产构建默认关闭SourceMap，导致无法追踪混淆代码对应的原文件。修改vite.config.js开启SourceMap：

export default defineConfig({
  // ...其他配置
  build: {
    sourcemap: true // 开启生产环境SourceMap
  }
})

重新构建后，在浏览器开发者工具中查看报错栈，可直接定位到未混淆的原代码行，明确问题根源。

2. 确保jQuery全局可访问 #

DataTables依赖全局的jQuery对象，生产构建时可能因打包策略导致jQuery未暴露到全局。调整导入代码：

<script setup>
import $ from 'jquery';
// 将jQuery暴露到全局window对象
window.$ = window.jQuery = $;

import DataTable from 'datatables.net-vue3';
import DataTablesLib from 'datatables.net';
// 注册DataTables核心库到Vue组件
DataTable.use(DataTablesLib);

defineProps({
    Invoices: JSON,
});

const columns = [{data: 'id', title: 'No.'}];
</script>

3. 配置Vite避免Tree-Shaking误删DataTables代码 #

Vite的Tree-Shaking可能将DataTables的部分初始化代码误判为无用代码移除。在vite.config.js中添加依赖优化配置：

export default defineConfig({
  // ...其他配置
  optimizeDeps: {
    include: ['datatables.net', 'datatables.net-vue3', 'jquery'],
    exclude: []
  },
  build: {
    commonjsOptions: {
      include: [/datatables.net/, /jquery/, /node_modules/]
    }
  }
})

4. 检查DataTables插件加载顺序 #

如果使用了DataTables扩展插件（如Buttons、Responsive等），需确保核心库加载后再加载插件，避免初始化顺序错误导致的undefined问题。

5. 禁用特定文件的压缩优化 #

若上述方法无效，可尝试在vite.config.js中配置Terser排除DataTables相关文件，避免压缩时破坏代码结构：

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue'
import tailwindcss from 'tailwindcss';
import { nodePolyfills } from 'vite-plugin-node-polyfills'
import terser from '@rollup/plugin-terser';

export default defineConfig({
  // ...其他配置
  build: {
    minify: 'terser',
    terserOptions: {
      exclude: [/datatables.net.*/, /jquery.dataTables.*/]
    }
  },
  plugins: [
    // ...其他插件
    terser()
  ]
})

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