Laravel，在模板中添加javascript到scripts.js文件

2024-12-19 09:28:16 JS 1250

在Laravel中，将JavaScript代码添加到单独的 scripts.js 文件中，然后在模板中引入这个文件，可以通过以下步骤实现：

1. 创建 `scripts.js` 文件

首先，在你的Laravel项目中，找到或创建一个适合存放JavaScript文件的目录，通常是 public/js/ 目录。在这个目录下创建一个名为 scripts.js 的文件。

javascript
// 示例内容
console.log('Hello from scripts.js');

2. 引入 `scripts.js` 文件到模板中

一般情况下，你可能希望在某个特定的视图或者布局文件中引入这个 scripts.js 文件。

方法一：在 Blade 模板中引入

如果你希望在 Blade 模板中引入 scripts.js 文件，可以在你的 Blade 模板文件中使用 asset() 函数来引入这个文件。

例如，在你的 resources/views/welcome.blade.php 文件中：

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Welcome</title>
    <!-- 引入 CSS 文件 -->
    <link rel="stylesheet" href="{{ asset('css/app.css') }}">
</head>
<body>
    <h1>Welcome to Laravel</h1>
    <!-- 页面内容 -->
    
    <!-- 引入 JavaScript 文件 -->
    <script src="{{ asset('js/scripts.js') }}"></script>
</body>
</html>

方法二：在静态 HTML 文件中引入

如果你希望在 Laravel 应用中的某个静态页面中引入 scripts.js 文件，你可以直接使用 <script> 标签来引入文件。

例如，在你的 public/index.html 文件中：

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Static HTML Page</title>
    <!-- 引入 CSS 文件 -->
    <link rel="stylesheet" href="../css/app.css">
</head>
<body>
    <h1>Static HTML Page</h1>
    <!-- 页面内容 -->
    
    <!-- 引入 JavaScript 文件 -->
    <script src="../js/scripts.js"></script>
</body>
</html>

3. 示例与测试

确保 scripts.js 文件和引入路径都设置正确，并且在浏览器中访问你的应用以确认 JavaScript 文件被正确加载和执行。在开发者工具的控制台中检查是否输出了 Hello from scripts.js 的日志信息。

注意事项

路径问题：确保路径正确指向 scripts.js 文件，特别是在 Blade 模板中使用 asset() 函数时。
顺序问题：通常情况下，将 JavaScript 文件引入放在 </body> 标签之前可以优化页面加载性能，因为这样可以避免阻塞页面渲染。

通过以上步骤，你可以在 Laravel 应用中将 JavaScript 代码组织到单独的文件中，并在模板中有效地引入和使用。

1. 创建 scripts.js 文件