Vue 在 Laravel Spark Blade 模板中包含两次 Javascript 文件

Question

I'm new to Laravel Spark and Vue, and have tried to move an existing app to it. In that app, I have these scripts included in the Blade template, which is then injected into app.blade.php:

<script type="application/javascript" src="{{ mix('js/sidebar.js') }}"></script>
<script type="application/javascript" src="{{ mix('js/addEditTask.js') }}"></script>
<script type="application/javascript" src="{{ mix('js/scheduler.js') }}"></script>

The problem is that functions from inside these files are getting called twice. How can I fix this?

Answer 1

I ended up adding a stack to the bottom of my app.blade.php, so it looks like this:

<!-- JavaScript -->
@stack('scripts-bottom')
<script src="{{ mix('js/app.js') }}"></script>

Then in my other blade file, I push them onto the stack:

@push('scripts-bottom')
<script type="application/javascript" src="{{ asset('js/sidebar.js') }}"></script>
<script type="application/javascript" src="{{ asset('js/addEditTask.js') }}"></script>
<script type="application/javascript" src="{{ asset('js/scheduler.js') }}"></script>
@endpush