Question

我阅读了有关如何包含像JQuery这样的库的文档的this页面。我继续这样做：

npm install jquery
npm run dev

由于JQuery在此之后没有神奇可用，我环顾四周，并在public/js/app.js中引用并使用它。所以我在主布局文件中使用了以下行，现在我可以使用JQuery。

<script src="{{asset('js/app.js')}}"></script>

我在网上任何地方都没有看到这样的解决方法，所以我的问题是，我做得对吗？此外，我在控制台中收到此错误：

TypeError：window.Laravel未定义[了解详情] http://localhost/js/app.js:1697:1 webpack_require http://localhost/js/app.js:20:12 http://localhost/js/app.js:778:1 webpack_require http://localhost/js/app.js:20:12 http://localhost/js/app.js:41491:1 webpack_require http://localhost/js/app.js:20:12 http://localhost/js/app.js:66:18 http://localhost/js/app.js:1:11

Answer 1

是的，这是在Laravel 5.4和5.5中包含jQuery的最直接方式。但这可能不是唯一的方式，也不是最好的方式。 Laravel允许至少两种方式来包含外部或自定义JS库。

方法A：没有Laravel Mix

方法B：使用Laravel Mix（npm run dev / production）

Laravel在文件resources/assets/js/bootstrap.js中使用方法B包含jQuery。

要使resources/assets中的任何更改生效，首先需要在项目目录下运行npm run dev/production。这将assets/js/中包含的所有JS文件合并到一个文件public/js/app.js中，然后可以通过包含

来使用

<script src="{{asset('js/app.js')}}"></script>

在视图的

<head>...</head>

块中。

关于window.Laravel is undefined错误，这个

<script>
    window.Laravel = {!! json_encode([
        'csrfToken' => csrf_token(),
    ]) !!};
</script>

每个需要的视图文件<head>...</head>中都需要

， public/js/app.js之前。

Answer 2

Laravel 5.5开箱即用jQuery。你实际上不需要做任何事情。

您的错误似乎与其CSRF令牌有关。参考window.Laravel is undefined

将其添加到HTML文件的<head></head>部分。

<script>
    window.Laravel = {!! json_encode([
        'csrfToken'=>csrf_token()
    ]) !!}
</script>

在Laravel 5.5中包含JS库

2 个答案: