php 如果我在blade文件中包含app.js,jQuery函数和库将无法工作,

s71maibg  于 2022-11-28  发布在  PHP
关注(0)|答案(1)|浏览(111)

我在我的Laravel应用程序中有推送器通知系统的vue.js组件,我必须为博客文章安装tinymce。如果我在我的主布局刀片文件中添加js/app.js,我的tinymce和其他jquery功能将停止工作。但一切都与正常的jquery 3.4.1公共文件夹链接工作。这对我来说很重要,因为vue.js组件添加app.js这里是我的文件代码
main_layout.blade.php

{{--<script src="{{asset('js/app.js')}}" ></script>--}}
<script src="{{asset('Assets/bootstrap4/jquery-3.4.1.min.js')}}" ></script>
<script src="{{asset('node_modules/tinymce/tinymce.min.js')}}"></script>
<script src="{{asset('node_modules/tinymce/jquery.tinymce.min.js')}}"></script>
<script src="{{asset('node_modules/tinymce/themes/silver/theme.js')}}"></script
<script src="{{asset('Admin/vendor/js-cookie/js.cookie.js')}}"></script>
<script src="{{asset('Admin/vendor/jquery.scrollbar/jquery.scrollbar.min.js')}}"></script>
<script src="{{asset('Admin/vendor/jquery-scroll-lock/dist/jquery-scrollLock.min.js')}}"></script>
<script src="{{asset('plugins/sweetalert/sweetalert.min.js')}}"></script>
<script src="{{asset('plugins/select2/dist/js/select2.js')}}"></script>

<script src="{{asset('Admin/js/argon.js')}}"></script>
<script src="{{asset('js/script.js')}}"></script>
<script type="text/javascript">
$(document).ready(function(){
    $(".nav-link.collapseLink").click(function(){
        $(this).children(".collapse").collapse('toggle');
    });

  })
</script>

@yield('javascript')

</body>

resources/js/bootstrap.js

window._ = require('lodash');

 try {
 window.Popper = require('popper.js').default;
 window.$ = window.jQuery = require('jquery');

 require('bootstrap');
  } catch (e) {}


  window.axios = require('axios');

  window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';


  import Echo from 'laravel-echo';

   window.Pusher = require('pusher-js');

   window.Echo = new Echo({
     broadcaster: 'pusher',
     key: process.env.MIX_PUSHER_APP_KEY,
     cluster: process.env.MIX_PUSHER_APP_CLUSTER,
     forceTLS: true,
     encrypted: true,
     authEndpoint: "/broadcasting/auth",
     namespace:'App.Notifications',

     });

resource/js/app.js

require('./bootstrap');

 window.Vue = require('vue');

 Vue.component('notifications', require('./components/Notifications.vue').default);



 window.onload = function () {
  var app = new Vue({
    el: '#app',

   });
   }

我已经检查了我所有的代码,没有发现任何其他错误,请建议任何解决方案,如果我取消注解js/app.js和注解公共文件夹jQuery,那么所有其他库都会给出错误,就像它们没有jQuery一样。我还尝试在app.js脚本链接中延迟。
如果使用公共文件夹jquery,如我下面所示,那么我所有的jquery函数都可以工作,也可以使用tinymce,但我无法使用vue.js组件
谢谢

yzuktlbb

yzuktlbb1#

你必须重新格式化你的代码。Jquery脚本行应该在app.js行之前。

<script src="{{asset('Assets/bootstrap4/jquery-3.4.1.min.js')}}" ></script>
<script src="{{ asset('js/app.js') }}"></script>

相关问题