如何在 Laravel 中包含 JavaScript 适用于所有场景的分步指南
如何在 Laravel 11 中包含 JavaScript：适用于所有场景的分步指南
在 Laravel 11 中，将 JavaScript 添加到项目中可以轻而易举，这要归功于默认的资源捆绑器 Vite。以下是如何为各种场景设置 JavaScript，从全局包含到特定视图中的条件加载。
1. 在所有文件中包含 JavaScript
在许多情况下，您可能希望在 Laravel 应用程序中全局包含 JavaScript。以下是如何组织和捆绑 JavaScript 以实现普遍包容。
第 1 步：放置 JavaScript 文件
- 位置：将JavaScript文件存储在resources/js目录中。例如，如果您的文件名为 custom.js，请将其保存为 resources/js/custom.js。
- 组织：对于包含多个JavaScript文件的复杂项目，您可以将它们组织在resources/js的子目录中，例如resources/js/modules/custom.js。
第2步：使用Vite编译JavaScript
Laravel 11 使用 Vite 来管理资产。要将其配置为捆绑您的 JavaScript：
- 包含在app.js中：打开resources/js/app.js并导入您的自定义文件：
import './custom.js';
- 在视图中直接导入：或者，如果您只想在某些视图中使用 JavaScript，您可以在 Blade 模板中使用 @vite 指令：
@vite('resources/js/custom.js')
第三步：配置vite.config.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
使用 Vite 编译您的资产：
- 对于开发：运行 npm run dev
- 对于生产：运行 npm run build
第 5 步：在 Blade 模板中加载 JavaScript
要在模板中包含 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 文件存储在resources/js 中。
- 在 app.js 中导入 以进行全局包含或根据需要直接包含在 Blade 模板中。
- 使用Vite编译资产。
- 在 Blade 模板中使用 @vite 加载 JavaScript。
通过此设置，JavaScript 将在 Laravel 11 项目中的站点范围内可用。
2. 了解刀片渲染顺序
当有条件地在特定视图中包含 JavaScript 时，了解 Blade 模板的渲染顺序至关重要。
在 Laravel 中，首先处理布局，然后是各个视图和部分。渲染过程如下：
- 首先渲染布局，并为内容注入创建占位符（@yield 和 @section）。
- 接下来处理子视图或部分视图，并将其内容插入到布局占位符中。
由于这个顺序，如果你想根据子视图内容有条件地在布局中添加 JavaScript 文件，标准变量检查将不起作用。您需要使用 Blade 的 @stack 和 @push 指令来更灵活地处理特定于页面的 JavaScript。
3. 使用 Stack 和 Push 有条件地将 JavaScript 包含在特定视图中
为了将 JavaScript 添加到特定视图，Laravel 的 @stack 和 @push 指令提供了一个有效的解决方案，允许您有条件地在布局中包含脚本。
第 1 步：在布局中定义堆栈
在您的布局中，为页面特定的脚本创建一个堆栈：
import './custom.js';
第 2 步：从子视图推送脚本
在需要 JavaScript 的特定 Blade 文件中，推送到脚本堆栈：
@vite('resources/js/custom.js')
通过此设置，仅在加载特定视图时才会包含 custom.js。此方法提供了一个与 Laravel 渲染顺序配合使用的干净解决方案，确保根据需要有条件地包含 JavaScript 文件。
在哪里声明@push？
@push 语句在 Blade 视图中的放置主要关系到可读性和执行顺序。以下是如何有效使用@push：
- 在视图中的放置：虽然您可以将 @push 放置在 Blade 视图中的任何位置，但最佳实践是将其放置在文件末尾，通常位于 @section 内容之后。这使得脚本相关的代码与主要内容分开，提高了可读性和可维护性。
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig({
plugins: [
laravel({
input: ['resources/js/app.js'],
refresh: true,
}),
],
});
- 多个 @push 语句的顺序：如果同一个堆栈有多个 @push 声明（例如 @push('scripts')），它们将按照它们在视图中出现的顺序附加。例如：
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Laravel App</title>
@vite('resources/js/app.js')
</head>
<body>
<!-- Content here -->
</body>
</html>
在这种情况下，script1.js 将在 script2.js 之前加载，因为 @push 按照声明的顺序将内容添加到堆栈中。
- 在部分和组件中使用 @push：@push 也可以在 Blade 部分（例如 @include）或 Blade 组件中使用。这对于将特定于视图的脚本或样式直接包含在可重用组件中非常有用，从而可以轻松管理依赖项。
<!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>
当此部分包含在视图中时，partial-specific.js 将被添加到布局文件中的脚本堆栈中。
- 使用@prepend控制顺序：如果特定脚本需要在同一堆栈中的其他脚本之前加载，您可以使用@prepend而不是@push。 @prepend 将内容放置在堆栈的开头，从而可以更好地控制加载顺序。
import './custom.js';
这里，ritical.js 将在 non_ritic.js 之前加载，无论它们在 Blade 文件中的位置如何。
要点
- 将 @push 放在视图的末尾以提高清晰度和可维护性。
- 顺序 由视图中的位置决定，较早的 @push 语句首先加载。
- @push 在部分和组件中工作，可以轻松包含特定于视图的依赖项。
- 对于需要在同一堆栈中首先加载的脚本使用@prepend。
4.替代方案：在布局中使用内联条件语句
如果您需要更好地控制何时包含 JavaScript，Laravel 的条件语句允许直接在布局中使用基于路由或变量的逻辑。
根据路线有条件地包含
您可以直接在布局中使用路由检查来包含基于当前路由的 JavaScript：
@vite('resources/js/custom.js')
基于变量有条件包含
要根据变量有条件地加载脚本，您可以在控制器或子视图中设置一个标志，然后在布局中检查它：
- 在你的控制器中：
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig({
plugins: [
laravel({
input: ['resources/js/app.js'],
refresh: true,
}),
],
});
- 布局中：
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Laravel App</title>
@vite('resources/js/app.js')
</head>
<body>
<!-- Content here -->
</body>
</html>
这种方法允许您根据特定变量或路由控制 JavaScript 加载，为自定义页面设置提供灵活性。
概括
以下是所讨论方法的快速概述：
- 全局包含：将 JavaScript 放入 app.js 中并使用 @vite 将其全局包含。
- Stack 和 Push 的条件包含：使用 @stack 和 @push 指令进行灵活、模块化的脚本处理，确保脚本仅加载到需要的视图中。
- 布局中的条件语句：使用基于路由的检查或控制器变量有条件地直接在布局中加载 JavaScript。
这些选项允许您精确控制 JavaScript 加载，使您的 Laravel 11 项目高效且可维护。
以上是如何在 Laravel 中包含 JavaScript 适用于所有场景的分步指南的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
说明PHP中的安全密码散列（例如，password_hash，password_verify）。为什么不使用MD5或SHA1？
Apr 17, 2025 am 12:06 AM
在PHP中，应使用password_hash和password_verify函数实现安全的密码哈希处理，不应使用MD5或SHA1。1)password_hash生成包含盐值的哈希，增强安全性。2)password_verify验证密码，通过比较哈希值确保安全。3)MD5和SHA1易受攻击且缺乏盐值，不适合现代密码安全。
PHP类型提示如何起作用，包括标量类型，返回类型，联合类型和无效类型？
Apr 17, 2025 am 12:25 AM
PHP类型提示提升代码质量和可读性。1)标量类型提示：自PHP7.0起，允许在函数参数中指定基本数据类型，如int、float等。2)返回类型提示：确保函数返回值类型的一致性。3)联合类型提示：自PHP8.0起，允许在函数参数或返回值中指定多个类型。4)可空类型提示：允许包含null值，处理可能返回空值的函数。
PHP和Python：解释了不同的范例
Apr 18, 2025 am 12:26 AM
PHP主要是过程式编程，但也支持面向对象编程（OOP）；Python支持多种范式，包括OOP、函数式和过程式编程。PHP适合web开发，Python适用于多种应用，如数据分析和机器学习。
您如何防止PHP中的SQL注入？ （准备的陈述，PDO）
Apr 15, 2025 am 12:15 AM
在PHP中使用预处理语句和PDO可以有效防范SQL注入攻击。1)使用PDO连接数据库并设置错误模式。2)通过prepare方法创建预处理语句，使用占位符和execute方法传递数据。3)处理查询结果并确保代码的安全性和性能。
PHP和Python：代码示例和比较
Apr 15, 2025 am 12:07 AM
PHP和Python各有优劣，选择取决于项目需求和个人偏好。1.PHP适合快速开发和维护大型Web应用。2.Python在数据科学和机器学习领域占据主导地位。
PHP：处理数据库和服务器端逻辑
Apr 15, 2025 am 12:15 AM
PHP在数据库操作和服务器端逻辑处理中使用MySQLi和PDO扩展进行数据库交互，并通过会话管理等功能处理服务器端逻辑。1）使用MySQLi或PDO连接数据库，执行SQL查询。2）通过会话管理等功能处理HTTP请求和用户状态。3）使用事务确保数据库操作的原子性。4）防止SQL注入，使用异常处理和关闭连接来调试。5）通过索引和缓存优化性能，编写可读性高的代码并进行错误处理。
PHP的目的：构建动态网站
Apr 15, 2025 am 12:18 AM
PHP用于构建动态网站，其核心功能包括：1.生成动态内容，通过与数据库对接实时生成网页；2.处理用户交互和表单提交，验证输入并响应操作；3.管理会话和用户认证，提供个性化体验；4.优化性能和遵循最佳实践，提升网站效率和安全性。
在PHP和Python之间进行选择：指南
Apr 18, 2025 am 12:24 AM
PHP适合网页开发和快速原型开发，Python适用于数据科学和机器学习。1.PHP用于动态网页开发，语法简单，适合快速开发。2.Python语法简洁，适用于多领域，库生态系统强大。
