Laravel Blade文件中无法调用jQuery的问题求助

云上老周

2026-4-14

哥们，太懂你这种搜遍类似问题却解决不了的憋屈了！我帮你捋捋为啥会出现这个问题，还有几个靠谱的解决办法：

问题根源

你用Vite管理资源的话，默认会把JS打包成ES模块，模块里的变量默认是被隔离在模块作用域里的。哪怕你在app.js里写了window.$ = $，也可能因为Vite的模块是异步加载的，导致你的内联脚本先执行了——这时候window.$还没被赋值，自然就报错$ is not defined了。

解决方案1：调整JS资源的加载位置（最简单直接）

把@vite加载JS的部分从<head>移到<body>的末尾，放在你的内联脚本前面。这样能保证app.js先执行完、给window挂上$之后，内联脚本才会运行：

<html>
  <head>
    @vite(['resources/css/admin/app.css']) <!-- CSS依然放在head里没问题 -->
  </head>
  <body>
    ...
    
    <!-- 把JS移到内联脚本前面 -->
    @vite(['resources/js/admin/app.js'])
    
    <script type="text/javascript">
        $(document).ready(function() {
             // 现在应该能正常调用$了
        });
    </script>
  </body>
</html>

解决方案2：给内联脚本加上模块标记

如果不想调整资源位置，可以把内联脚本改成type="module"，这样它会和Vite的模块脚本一样，等待所有依赖加载完成后再执行：

<script type="module">
    // 这里可以直接import jQuery，不用依赖全局变量
    import $ from 'jquery';
    $(document).ready(function() {
         // 你的业务逻辑代码
    });
</script>

不过这种方式需要你习惯ES模块的写法，如果内联脚本里有大量依赖全局$的老代码，可能需要做一些适配。

解决方案3：在Vite配置里全局注入jQuery

如果你想让$全局可用，不用每次在模块里手动挂到window，可以在vite.config.js里配置全局注入：

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import inject from '@rollup/plugin-inject';

export default defineConfig({
  plugins: [
    laravel({
      input: ['resources/js/admin/app.js', 'resources/css/admin/app.css'],
      refresh: true,
    }),
    inject({
      $: 'jquery',
      jQuery: 'jquery',
      // 把jQuery注入到所有模块的全局作用域
    })
  ],
  resolve: {
    alias: {
      'jquery': 'jquery/dist/jquery.min.js',
    },
  },
});

配置完之后，你甚至可以删掉app.js里的window.$ = $，$会自动成为全局变量，内联脚本里直接用就行。

额外小技巧：测试全局变量的加载顺序

如果还是不确定问题出在哪，可以在app.js和内联脚本里加日志，看执行顺序：

// app.js里的代码
import $ from 'jquery';

$(document).ready(function () {
    console.log('app.js：jQuery已初始化');
});

window.$ = $;
console.log('app.js：window.$已赋值');

<!-- 内联脚本里加日志 -->
<script type="text/javascript">
    console.log('内联脚本：当前window.$的值是', window.$);
    $(document).ready(function() {
         // 逻辑代码
    });
</script>

通过浏览器控制台的日志顺序，就能一眼看出来是不是内联脚本跑早了。

备注：内容来源于stack exchange，提问作者Bagbaq

Laravel Blade文件中无法调用jQuery的问题求助

问题根源 #

解决方案1：调整JS资源的加载位置（最简单直接） #

解决方案2：给内联脚本加上模块标记 #

解决方案3：在Vite配置里全局注入jQuery #

额外小技巧：测试全局变量的加载顺序 #

问题根源

解决方案1：调整JS资源的加载位置（最简单直接）

解决方案2：给内联脚本加上模块标记

解决方案3：在Vite配置里全局注入jQuery

额外小技巧：测试全局变量的加载顺序