Laravel 10+Vite集成Yajra Datatables报错求助

• 先装对依赖
  用Composer安装Yajra核心包：
  composer require yajra/laravel-datatables-oracle
  再安装适配Vite环境的前端依赖（避免CDN版本冲突）：
  npm install jquery datatables.net datatables.net-bs5 --save-dev
  注：如果项目用Bootstrap4，把datatables.net-bs5换成datatables.net-bs4即可。

• 配置Vite全局暴露jQuery和DataTables
  修改vite.config.js，让jQuery成为全局变量，同时配置别名避免路径问题：

  import { defineConfig } from 'vite';
  import laravel from 'laravel-vite-plugin';
  import path from 'path';
  
  export default defineConfig({
      plugins: [
          laravel({
              input: ['resources/css/app.css', 'resources/js/app.js'],
              refresh: true,
          }),
      ],
      resolve: {
          alias: {
              'jquery': path.resolve(__dirname, 'node_modules/jquery/dist/jquery.js')
          }
      },
      define: {
          'window.jQuery': 'jquery',
          'window.$': 'jquery'
      }
  });
  

• 在app.js里正确导入资源
  打开resources/js/app.js，按顺序导入jQuery和DataTables，确保全局挂载：

  import $ from 'jquery';
  window.$ = window.jQuery = $;
  
  import 'datatables.net';
  import 'datatables.net-bs5'; // 对应你的UI框架版本
  import 'datatables.net-bs5/css/dataTables.bootstrap5.css'; // 导入样式文件
  

• 移除手动添加的jQuery CDN
  删掉app.blade.php里的jQuery CDN链接，Vite已经处理了依赖引入，重复引入会导致全局变量冲突。

• 重新打包前端资源
  运行npm run dev（开发环境）或者npm run build（生产环境），确保Vite把所有依赖打包进资源文件。

• 检查视图中的初始化代码
  确保在DOM加载完成后再初始化DataTable，避免元素未加载的问题：

  <script>
      document.addEventListener('DOMContentLoaded', function() {
          $('#users-table').DataTable({
              processing: true,
              serverSide: true,
              ajax: '{{ route('users.data') }}',
              columns: [
                  { data: 'id', name: 'id' },
                  { data: 'name', name: 'name' },
                  { data: 'email', name: 'email' },
                  { data: 'created_at', name: 'created_at' }
              ]
          });
      });
  </script>
  

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