Laravel 9与Vite环境下Select2无法工作，求助排查问题

核心问题分析 #

你当前的问题源于混合使用npm本地依赖与CDN资源，以及Select2对全局jQuery变量的依赖未被正确满足，同时初始化事件绑定错误导致Select2未被激活。

分步解决方案 #

1. 清理冲突资源 #

完全移除Blade模板中CDN引入的Select2脚本与CSS：

<!-- 删掉这两行 -->
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js" defer></script>

2. 修正Vite配置 #

调整vite.config.js的别名配置，确保jQuery的路径指向正确：

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

3. 重构app.js代码 #

确保jQuery全局暴露的完整性，正确导入并初始化Select2：

import "./bootstrap";

// 先导入jQuery，同时挂载$与jQuery到全局（Select2会检查这两个变量）
import $ from 'jquery';
window.$ = window.jQuery = $;

// 导入本地Select2核心与CSS
import 'select2';
import 'select2/dist/css/select2.min.css';

// 验证jQuery可用性
$("#test").html("ok");

// 用DOMContentLoaded事件初始化Select2（替换无效的load事件）
$(document).ready(function() {
    $(".js-example-basic-single").select2();
});

4. 重新编译资源 #

执行命令重新构建前端资源：

# 开发环境
npm run dev

# 生产环境
npm run build

关键问题说明 #

1. CDN与本地依赖冲突：CDN的Select2脚本执行时，Vite模块环境中的jQuery尚未挂载到全局，导致"jQuery is not defined"错误；
2. 全局变量缺失：Select2不仅依赖$，还会检查全局jQuery变量，之前仅挂载$无法满足要求；
3. 事件绑定错误：$(document).on("load")无效，需要使用$(document).ready()或简写$(function(){})来确保DOM加载完成后初始化Select2。

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