Laravel 9 + Vite环境下$未定义（Uncaught ReferenceError）问题求助

针对你遇到的Uncaught ReferenceError: $ is not defined错误，结合Laravel 9和Vite的特性，按以下步骤排查修复：

1. 配置Vite全局注入jQuery #

Vite基于ES模块，直接在app.js挂载window.$可能因加载顺序问题失效，需通过Rollup插件全局注入：

• 先安装依赖：

  npm install @rollup/plugin-inject --save-dev
  

• 修改vite.config.js，添加插件配置与jQuery别名：

  import { defineConfig } from 'vite';
  import laravel from 'laravel-vite-plugin';
  import inject from '@rollup/plugin-inject';
  
  export default defineConfig({
      plugins: [
          laravel({
              input: ['resources/css/app.css', 'resources/js/app.js'],
              refresh: true,
          }),
          // 全局注入jQuery到window
          inject({
              $: 'jquery',
              jQuery: 'jquery'
          })
      ],
      resolve: {
          // 指向jQuery压缩版，优化加载
          alias: {
              'jquery': 'jquery/dist/jquery.min.js'
          }
      }
  });
  

2. 同步更新resources/js/app.js #

在app.js中明确挂载jQuery到全局对象，配合Vite配置确保全局可访问：

import $ from 'jquery';
window.$ = window.jQuery = $;

3. 确保视图中脚本加载顺序正确 #

• 确认app.blade.php中已正确引入Vite资源：

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

• 自定义jQuery代码需放在Vite脚本之后，或用DOMContentLoaded包裹（避免异步加载导致的提前执行）：

  document.addEventListener('DOMContentLoaded', function() {
      // 示例：执行jQuery操作
      $('#target-element').fadeIn();
  });
  

4. 清除缓存并重新构建 #

执行以下命令清除视图缓存并重新编译资源：

npm run dev
php artisan view:clear

生产环境替换为npm run build。

5. 排查冲突问题 #

若仍未解决，打开浏览器控制台执行console.log(window.jQuery)：

• 若输出jQuery对象，说明$被其他库覆盖，可临时用jQuery代替，或执行$.noConflict()重新绑定：

  const $ = jQuery.noConflict();
  // 后续用$执行操作
  

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