Laravel 10 + Vite项目中正确导入select2的方法（无需别名）

无需别名的正确导入步骤 #

• 先确认jQuery已安装（select2依赖它），未安装则执行：npm i jquery
• 在resources/js/app.js中按顺序导入并挂载全局：

  // 导入jQuery并挂载到全局window对象
  import $ from 'jquery';
  window.$ = window.jQuery = $;
  
  // 导入select2核心JS和样式
  import 'select2';
  import 'select2/dist/css/select2.min.css';
  

• 添加入场初始化代码（可放在app.js末尾或单独脚本文件）：

  $(document).ready(() => {
      $('.select2').select2();
  });
  

• 确保Blade模板里正确引入Vite编译的资源：

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

你之前操作的问题排查 #

1. jQuery未全局挂载：如果之前没把jQuery挂载到window，select2找不到全局的$/jQuery，直接触发select2 is not a function错误。
2. 别名配置路径错误：之前配别名后出现URL加载错误，大概率是别名指向的select2资源路径不对，导致Vite尝试加载不存在的文件，或者没处理好select2内部的字体资源引用。
3. 导入顺序颠倒：如果先导入select2再导入jQuery，select2初始化时找不到依赖，也会抛出错误。

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