Laravel执行npm run build后JQuery无法正常工作的问题排查

1. $ is not defined：你导入了jQuery，但未将其暴露到全局window对象。Vite在生产构建时会对模块进行封装和树摇，不会自动把导入的模块挂载到全局环境，这就是开发模式下看似正常，但构建后$无法访问的核心原因。
2. require is not defined：你使用的部分依赖（如AdminLTE、OverlayScrollbars）内部使用了CommonJS规范的require语法，而Vite生产环境默认不支持浏览器直接运行require，导致报错。

1. 全局挂载jQuery #

修改app.js中jQuery的导入逻辑，将其挂载到window并设置$别名：

// 替换原jQuery导入行
import jQuery from '../vendors/plugins/jquery/jquery.js';
window.$ = window.jQuery = jQuery;

// 后续导入保持不变
import './bootstrap';
import '../vendors/plugins/bootstrap/js/bootstrap.bundle.js'
import '../vendors/plugins/overlayScrollbars/js/jquery.overlayScrollbars.js';
import '../vendors/dist/js/adminlte.js';
import '../vendors/plugins/toastr/toastr.min.js';

// ... 其余CSS和Alpine代码不变

2. 处理require未定义问题 #

在项目根目录的vite.config.js中添加配置，让Vite兼容CommonJS语法：

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,
        }),
    ],
    define: {
        // 定义全局require函数，兼容依赖中的CommonJS语法
        'require': () => {},
    },
    optimizeDeps: {
        // 强制Vite转换这些依赖为ES模块
        include: ['jquery', 'adminlte', 'overlay-scrollbars', 'toastr']
    }
});

额外建议 #

• 优先通过npm安装依赖（如npm install jquery admin-lte overlay-scrollbars toastr），而非手动下载到vendors目录。这样Vite能更高效地处理模块依赖，减少兼容性问题，导入路径也会更简洁（如import $ from 'jquery';）。
• 检查bootstrap.js中是否有重复导入jQuery或覆盖全局变量的逻辑，避免冲突。

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