Laravel Vite中导入jquery-confirm插件报错：$.alert is not a function

问题原因 #

CDN引入时，jquery-confirm能直接找到全局的$/jQuery并挂载方法，但Vite的模块隔离机制下，插件可能无法自动识别全局的jQuery实例，导致方法未绑定到$对象上。

解决步骤 #

1. 确认依赖安装 #

先确保本地已安装jquery和jquery-confirm：

npm install jquery jquery-confirm

2. 调整app.js导入逻辑 #

必须在导入jquery-confirm之前，将jQuery挂载到全局window对象上，让插件能正确绑定方法：

// 导入jQuery并挂载到全局
import $ from 'jquery';
window.$ = window.jQuery = $;

// 导入jquery-confirm的核心JS和样式
import 'jquery-confirm/dist/jquery-confirm.min.js';
import 'jquery-confirm/dist/jquery-confirm.min.css';

3. 配置Vite全局变量（可选） #

如果上述步骤仍无效，可在vite.config.js中添加全局变量定义，强制插件识别全局jQuery：

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',
    },
});

4. 测试调用有效性 #

在app.js或页面脚本中测试调用，确认方法可用：

$(document).ready(() => {
    $.alert({
        title: 'Alert!',
        content: 'Simple alert!',
    });
});

5. 确保模板正确引入Vite资源 #

在blade模板中通过@vite指令引入编译后的脚本：

@vite(['resources/js/app.js'])

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