如何在 Laravel Blade Html 中使用单独的 js 文件？答案

【问题标题】：How to use a separte js file in Laravel Blade Html?如何在 Laravel Blade Html 中使用单独的 js 文件？
【发布时间】：2022-01-08 13:58:55
【问题描述】：

如何在 Laravel Blade html 之外使用 js 文件？

除了我的布局文件之外，我还有一个用于 html 的文件 welcome.blade.php，它需要相当多的脚本。为了提高整洁度，我想将<scripts> 从welcome.blade.php 底部移动到一个单独的.js 文件中。

查看下面的当前代码，主要是为了让事情正常进行的测试。

welcome.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>

即使我在 resources/js folder 内创建了一个新的 welcome.js 脚本，通过 src 或资产进行链接也不起作用。

我不想把它放在 app.js 中（默认的 laravel 安装文件夹结构），因为这样它会为每个页面加载，而不仅仅是 welcome.js。

我尝试过使用堆栈，但使用资产时文件不存在。但是，在将脚本本身写入 push 块时它确实有效。但这并没有使用单独的 .js 文件......

layouts.blade.php

<body>
...
@stack('scripts')
</body>
</html>

welcome.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

如何在 Laravel Blade HTML 模板中使用单独的 .js 文件？

编辑

我真的需要在 webpack mix 中公开 welcome.js 脚本吗？添加额外的 .js 行后，它现在似乎可以工作了。

查看答案。

版本：Laravel 8

【问题讨论】：

标签： javascript html laravel laravel-blade

【解决方案1】：

问题是分离的 .js 文件在任何地方都不存在，因此不能由 welcome.blade.php 提供。通过在 webpack mix 中将脚本输出到 public 解决

脚本文件，welcome.js

alert('js works');

welcome.blade.php

@push('scripts')
  <script src="{{ asset('js/welcome.js' }}"></script>
@endpush

layouts.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', [
        //
    ]);

【讨论】：