javascript - 如何在 Laravel View 中添加外部 Javascript

Question

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

登录.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>

应用程序.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 发生冲突。