javascript 参考错误：未定义$，使用vite进行Jquery导入

ig9co6j1 于 2023-02-18 发布在 Java

关注(0)|答案(2)|浏览(595)

我尝试与新鲜安装laravel 9.20和最低配置

- 在现场配置js中**

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/js/app.js',
            ],
            refresh: true,
        }),
    ],
});

- 在应用程序js中**

import './bootstrap';

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

import '../sass/app.scss';

我也试过这个

import * as $ from "jquery";
window.$ = window.jQuery = $;

在blade中加载资产，并使用此脚本进行测试

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

$("#alertbox").alert("test");

但我在控制台中得到以下错误：
未捕获引用错误：未定义$
我弄不动了，你帮帮我吧

JavaScript

来源：https://stackoverflow.com/questions/73010251/referenceerror-is-not-defined-jquery-import-with-vite

2条答案

按热度按时间

insrf1ej1#

这是因为Vite的模块加载顺序。您看到了一个争用条件，这不是导入的问题。
要确认这一点，请尝试在超时后调用jQuery代码，如下所示。

<script>
   setTimeout(function() {
      console.log($);
      $("#alertbox").alert("test");
   }, 5000);
</script>

如果上面的命令没有错误，那么就意味着代码的执行顺序不正确，但是添加一个超时并不是解决这个问题的好方法，所以让我们来看看问题的原因。
如果你看源代码，你会看到类似这样的东西。

<script type="module" src="http://localhost/build/assets/app.342432.js"></script>

这意味着Vite将脚本作为模块加载。并且模块脚本总是被延迟。因此，如果您的jQuery脚本被放置在Vite指令之后，jQuery代码将在加载jQuery到窗口之前首先执行-这将触发$ is undefined错误。
在最佳实践中，您应该将jQuery代码移到app.js文件中，这样它就可以保留在自己的模块中。另一种处理方法是将您的script标记标记为模块，然后它将遵循文档的加载顺序。
如下所示更改脚本标记。

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

<script type="module">
   $("#alertbox").alert("test");
</script>

赞(0）回复(0）举报 2023-02-18

3qpi33ja2#

在刀片模板中添加来自CDN的jquery
https://cdnjs.com/libraries/jquery

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js" integrity="sha512-STof4xm1wgkfm7heWqFJVn58Hm3EtS31XFaagaa8VMReCXAkQnJZ+jEy8PCC/iT18dFy95WcExNHFTqLyp72eQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

并解决它

赞(0）回复(0）举报 2023-02-18

我来回答

javascript 参考错误：未定义$，使用vite进行Jquery导入

2条答案

相关问题

热门标签

最新问答