在 laravel 11 中,向项目添加 javascript 变得轻而易举,这要归功于默认的资源捆绑器 vite。以下是如何为各种场景设置 javascript,从全局包含到特定视图中的条件加载。
在许多情况下,您可能希望在 laravel 应用程序中全局包含 javascript。以下是如何组织和捆绑 javascript 以实现普遍包容。
laravel 11 使用 vite 来管理资产。要将其配置为捆绑您的 javascript:
import './custom.js';
@vite('resources/js/custom.js')
确保 vite.config.js 设置为正确处理 @vite 导入。默认情况下,它应该看起来像这样:
import { defineconfig } from 'vite'; import laravel from 'laravel-vite-plugin'; export default defineconfig({ plugins: [ laravel({ input: ['resources/js/app.js'], refresh: true, }), ], });
使用 vite 编译您的资产:
要在模板中包含 javascript 文件,请使用 @vite 指令:
<!doctype html> <html lang="en"> <head> <title>my laravel app</title> @vite('resources/js/app.js') </head> <body> <!-- content here --> </body> </html>
通过此设置,javascript 将在 laravel 11 项目中在整个站点范围内可用。
当有条件地在特定视图中包含 javascript 时,了解 blade 模板的渲染顺序至关重要。
在 laravel 中,首先处理布局,然后是各个视图和部分。渲染过程如下:
由于这个顺序,如果你想根据子视图内容有条件地在布局中添加 javascript 文件,标准变量检查将不起作用。您需要使用 blade 的 @stack 和 @push 指令来更灵活地处理特定于页面的 javascript。
为了将 javascript 添加到特定视图,laravel 的 @stack 和 @push 指令提供了有效的解决方案,允许您有条件地在布局中包含脚本。
在您的布局中,为页面特定的脚本创建一个堆栈:
<!doctype html> <html lang="en"> <head> <title>my laravel app</title> @vite('resources/js/app.js') @stack('scripts') <!-- define a stack for additional scripts --> </head> <body> @yield('content') </body> </html>
在需要 javascript 的特定 blade 文件中,推送到脚本堆栈:
@extends('layout') @section('content') <!-- your page-specific content here --> @endsection @push('scripts') @vite('resources/js/custom.js') @endpush
通过此设置,仅在加载特定视图时才会包含 custom.js。此方法提供了一个与 laravel 渲染顺序配合使用的干净解决方案,确保根据需要有条件地包含 javascript 文件。
@push 语句在 blade 视图中的放置主要关系到可读性和执行顺序。以下是如何有效使用@push:
@extends('layout') @section('content') <!-- main content here --> @endsection @push('scripts') @vite('resources/js/custom.js') @endpush
@push('scripts') <script src="script1.js"></script> @endpush @push('scripts') <script src="script2.js"></script> @endpush
在这种情况下,script1.js 将在 script2.js 之前加载,因为 @push 按照声明的顺序将内容添加到堆栈中。
<!-- partial.blade.php --> <div> <!-- partial content --> </div> @push('scripts') @vite('resources/js/partial-specific.js') @endpush
当此部分包含在视图中时,partial-specific.js 将被添加到布局文件中的脚本堆栈中。
@prepend('scripts') <script src="critical.js"></script> @endprepend @push('scripts') <script src="non_critical.js"></script> @endpush
这里,ritical.js 将在 non_ritic.js 之前加载,无论它们在 blade 文件中的位置如何。
如果您需要更好地控制何时包含 javascript,laravel 的条件语句允许直接在布局中使用基于路由或变量的逻辑。
您可以直接在布局中使用路由检查来包含基于当前路由的 javascript:
@if (request()->routeis('some.route.name')) @vite('resources/js/custom.js') @endif
要根据变量有条件地加载脚本,您可以在控制器或子视图中设置一个标志,然后在布局中检查它:
return view('your.view', ['loadcustomjs' => true]);
@if (!empty($loadCustomJS)) @vite('resources/js/custom.js') @endif
这种方法允许您根据特定变量或路由控制 javascript 加载,为自定义页面设置提供灵活性。
以下是所讨论方法的快速概述:
这些选项允许您精确控制 javascript 加载,使您的 laravel 11 项目高效且可维护。