Laravel 9+Vite环境下Datatable失效：提示jQuery未定义

问题根源 #

• Vite 采用 ES 模块机制，原有的 CommonJS 风格 require 未被正确整合到入口文件
• 视图内的 inline 脚本在 Vite 打包的资源加载前执行，导致无法访问全局 jQuery
• app.js 中存在冗余且错误的 DataTables 导入路径

修复步骤 #

1. 修正 JS 文件结构 #

bootstrap.js

保留原有逻辑，确保后续被入口文件导入：

try {
    window.Popper = require('popper.js').default;
    window.$ = window.jQuery = require('jquery');

    require('bootstrap');
    require('datatables.net');
} catch (e) {}

app.js

删除错误的 DataTables 导入，改为导入 bootstrap.js：

import './bootstrap';
// bootstrap.js 中已通过 require 加载 DataTables，无需重复导入

2. 确保 Vite 正确处理全局变量（可选兼容方案） #

若上述步骤后仍有问题，可在 vite.config.js 中添加全局变量配置：

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
    ],
    resolve: {
        alias: {
            jquery: 'jquery/dist/jquery.min.js'
        }
    },
    define: {
        'window.jQuery': 'jQuery',
        'window.$': 'jQuery'
    }
});

3. 修正视图中的脚本执行时机 #

视图内的 inline 脚本必须在 Vite 资源加载完成后执行，可选两种方案：

方案一：使用 DOM 加载完成事件

<table id="tableclient" class="table table-bordered table-striped table-hover sizethtd">
    <!-- 表格内容保持不变 -->
</table>

@vite(['resources/js/app.js'])
<script>
    document.addEventListener('DOMContentLoaded', function() {
        $('#tableclient').DataTable({
            processing: true,
            serverSide: false
        });
    });
</script>

方案二：将初始化代码移到 JS 文件中

在 bootstrap.js 末尾添加：

$(function () {
    // 仅当表格存在时初始化
    if ($('#tableclient').length) {
        $('#tableclient').DataTable({
            processing: true,
            serverSide: false
        });
    }
});

视图中仅保留表格和 @vite 指令即可。

4. 重新构建资源 #

执行以下命令确保依赖和打包正常：

npm install jquery popper.js bootstrap datatables.net
npm run dev

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