如何在 laravel 视图中添加外部 Javascript

Question

我正在尝试在我的登录视图中从外部添加我的 javascript 文件。我已经在我的 layouts/app.blade.php 的正文末尾和头部给出了 js src 链接。我试图给 js 链接我的看法，但它不起作用。该脚本仅在我将其内部放置在我的登录视图中时才有效。

登录.blade.php

<script>
//internal script
   $(document).ready(function(){
        alert("this is alert");
        $(".btn-gSignIn").mouseenter(function(){
            $(".btn-gSignIn").animate({background-color: white , color:#4285F4 , border-radius: 0px},5000);
            $(".btn-gSignIn").animate({background-color: #F3F3F3 , color:black , border-radius: 20px},5000);
        });
        $("div").css("background-color", "grey");

    });

</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> 
            <script src="{{ asset('js/app.js') }}" ></script>
    <script type="text/babel" src="{{ asset('js/login.js') }}" ></script>

app.blade.php

        <main class="py-4">
            @yield('content')

        </main>
    </div>

</body>

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> 
            <script src="{{ asset('js/app.js') }}" ></script>
    <script type="text/babel" src="{{ asset('js/login.js') }}" ></script>

Answer 1

在您的 login.blade.php 中，@endsection 之后将您的 js 导入放入推送堆栈中：

@push('js')
<script src="{{ asset('js/login.js') }}" ></script>
@endpush

在您的 app.blade.php 中，将您的 js 文件放在您的 </body> 标记结束之前。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"</script> 
<script src="{{ asset('js/app.js') }}" ></script>
@stack('js')
</body>

另外，如果你使用的是 laravel 附带的默认 app.js，那么它可能会导致与 jquery 冲突。