Javascript 为什么popper.js在laravel中不起作用_Javascript_Laravel_Popper.js

Javascript 为什么popper.js在laravel中不起作用

javascript laravel

Javascript 为什么popper.js在laravel中不起作用,javascript,laravel,popper.js,Javascript,Laravel,Popper.js,我已经尝试了很多可以在互联网上找到的选项，但我无法让它发挥作用我在终点站跑： npm install popper.js --save 接下来我编辑了我的“resources/js/bootstrap.js” 然后我把它添加到我的webpack.mix.js中 mix.autoload({ jquery: ['$', 'window.jQuery',"jQuery","window.$","jquery","window.jquery"], 'popper.js': ['Popper'] }

我已经尝试了很多可以在互联网上找到的选项，但我无法让它发挥作用

我在终点站跑：

npm install popper.js --save

接下来我编辑了我的“resources/js/bootstrap.js”

然后我把它添加到我的webpack.mix.js中

mix.autoload({
jquery: ['$', 'window.jQuery',"jQuery","window.$","jquery","window.jquery"],
'popper.js': ['Popper']
})

然后，我将此代码添加到包含标题的include模板中

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

 $(function () {
 $('[data-toggle="popover"]').popover()
 })
 </script>

这是我的package.json

"devDependencies": {
        "axios": "^0.18",
        "bootstrap": "^4.0.0",
        "cross-env": "^5.1",
        "jquery": "^3.3.1",
        "laravel-mix": "^2.0",
        "lodash": "^4.17.5",
        "popper.js": "^1.14.4",
        "vue": "^2.5.7"
    },
    "dependencies": {
        "popper": "^1.0.1",
        "tooltip.js": "^1.3.0"
    }

说到javascript，我算是个新手，但我对学习很感兴趣

请告诉我我错过了什么

提前谢谢

包含文件（头）


{{config（'app.name'，'Laravel'）}
$（函数（）{
$（'[data toggle=“popover”]'）。popover（）
})
@包括（'inc.navbar'）
@包括（'inc.messages'）
@产量（‘含量’）

您有两个结束标记。然后将脚本加载到标题中。在脚本中使用

src

时，它将加载文件，而不会使用正文。因此，您应该使用：

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

<script>
    $(function () {
        $('[data-toggle="popover"]').popover()
    });
</script>

我知道这是一篇老文章，但这让我在几个不同的场合感到困惑，在我在其他地方找到答案之前，我最终在这里寻找答案。我决不是专家，但对我来说，这是这一行的“延迟”：

“延迟”导致在页面加载之后加载脚本，这也是在加载popper脚本之后。jQuery被加载到您的js/app.js中，因此它在您的popper脚本之后才会加载，即使js/app.js位于页面上它们的上方

您可以从该行中删除“defer”，这将导致它立即加载，并在您的popper脚本之前加载，但这对我来说破坏了一些其他东西（在主体中查找尚未加载的元素的东西）。因此，我也在我的其他

行中添加了“defer”，这使它们以正确的顺序加载。希望这也能对你有用

编辑

package.json

add.js

"dependencies": {
    "popper.js": "^1.0.1",
    "tooltip.js": "^1.3.0"
}

并且永远不要在头部或身体上使用

popper.js

或

popper.min.js

作为CDN或脚本标记

它将与app.js脚本标记冲突

只需在关闭body标记之前添加

您是否尝试过使用CDN

您应该将其放在引导脚本之前。我尝试过，但仍然没有任何结果，

$（function（）{$（'[data toggle=“popover”]'）。popover（）}

是否仅用于引导？因为我在这里使用CDN链接：

http://getbootstrap.com/docs/4.1/getting-started/download/

别忘了jquery和popper都需要在引导链接上方，在

标记之前。我会编辑我的问题，这样你就可以看到我的整个设置了，仍然没有工作。。你是对的，我的错误是，我没有看到双

，所以我不确定它是否适合你。就凭你通过的考试，我看不出有什么错误。因此，如果只是为了引导，我建议您尝试使用CDN链接。并按正确的顺序使用它们。首先是jQuery，然后是Bootstrap。如果我像你说的那样输入代码，我会在chrome developer控制台中得到一个

$is not defined

错误。如果你查看我的参考资料/js/Bootstrap.js，你会发现加载顺序是正确的，它是Bootstrap与laravel的组合，CDN链接对我不起作用，因为我尝试了很多次，我想我只是缺少了一些关键的东西。现在我只需要找出如何包含这些文件，以便我可以在本地使用它们，但是非常感谢您的帮助！

"devDependencies": {
        "axios": "^0.18",
        "bootstrap": "^4.0.0",
        "cross-env": "^5.1",
        "jquery": "^3.3.1",
        "laravel-mix": "^2.0",
        "lodash": "^4.17.5",
        "popper.js": "^1.14.4",
        "vue": "^2.5.7"
    },
    "dependencies": {
        "popper": "^1.0.1",
        "tooltip.js": "^1.3.0"
    }

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{{ config('app.name', 'Laravel') }}</title>
    <!-- Scripts -->
    <script src="{{ asset('js/app.js') }}" defer>
  $(function () {
  $('[data-toggle="popover"]').popover()
})
    </script>

    <!-- Fonts -->
    <link rel="dns-prefetch" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet" 
type="text/css">

    <!-- Styles -->
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
        @include('inc.navbar')
        <div class="container">
        @include('inc.messages')
        @yield('content')
        </div>
    </body>
    <!--<script src="/vendor/unisharp/laravel-ckeditor/ckeditor.js"></script>
    <script src="/vendor/unisharp/laravel-ckeditor/adapters/jquery.js"></script>
    <script>
    $('textarea').ckeditor();
    </script>-->

</body>
</html>

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

<script>
    $(function () {
        $('[data-toggle="popover"]').popover()
    });
</script>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

"dependencies": {
    "popper.js": "^1.0.1",
    "tooltip.js": "^1.3.0"
}

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