¿Cómo usar un archivo js fuera de Laravel Blade html?
Además de mi archivo de diseños, tengo un solo archivo welcome.blade.php para el html y requiere una buena cantidad de scripts. Para mejorar la pulcritud, quería mover los <scripts> de la parte inferior de welcome.blade.php a un archivo .js separado.
Vea a continuación el código actual, principalmente una prueba para que todo funcione.
bienvenido.blade.php
@extends('layouts') @section('content') <div> Body Content </div> @endsection // Script added to the bottom of welcome.blade // How to move into a separated file, like in resources/js/welcome.js // <script src='/js/welcome.js'></script> doesn't work <script> alert('js works'); </script> Incluso cuando creo un nuevo script welcome.js dentro de la resources/js folder , la vinculación a través de src o assets no funciona.
No quiero ponerlo en app.js (estructura de carpetas de instalación de laravel predeterminada), porque luego se cargará para CADA página, en lugar de solo welcome.js.
Intenté usar stack, pero el archivo no existe cuando uso asset. Sin embargo, funciona cuando se escribe el propio script en el bloque de inserción. Pero entonces eso no es usar un archivo .js separado de todos modos...
diseños.blade.php
<body> ... @stack('scripts') </body> </html>bienvenido.blade.php
... @push('scripts') // Works when directly writing the script here // Trying to use `<script src="{{ asset('js/welcome.js' }}"></script>` fails // No js/welcome.js found. <script> alert('js works'); </script> @endpush¿Cómo puedo usar un archivo .js separado dentro de una plantilla HTML de Laravel Blade?
¿Realmente necesitaba hacer público el script welcome.js en la mezcla de paquete web? Parece funcionar ahora después de agregar la línea .js adicional.
Ver respuesta.
Versiones: Laravel 8
El problema era que el archivo .js separado no existía en ninguna parte, por lo tanto, no podía ser welcome.blade.php . Resuelto enviando el script al público en webpack mix
Archivo de script, bienvenido.js
alert('js works');bienvenido.blade.php
@push('scripts') <script src="{{ asset('js/welcome.js' }}"></script> @endpushdiseños.blade.php
<body> ... @stack('scripts') </body> </html>webpack.mix.js
mix.js('resources/js/app.js', 'public/js') .js('resources/js/welcome.js', 'public/js') .postCss('resources/css/app.css', 'public/css', [ // ]);