如何在 Laravel Blade Html 中使用單獨的 js 文件？

Question

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

除了我的布局文件之外，我還有一個文件welcome.blade.php用於 html，它需要相當多的腳本。 為了提高整潔度，我想將<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 或 assets 進行鏈接也不起作用。

我不想把它放在 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 混合中公開 welcome.js 腳本嗎？ 添加additional.js 行后，它現在似乎可以工作了。

見答案。

版本：Laravel 8

Answer 1

問題是分離的.js 文件在任何地方都不存在，因此無法通過welcome.blade.php 。 通過在 webpack mix 中向公眾輸出腳本解決

腳本文件，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', [
        //
    ]);

如何在 Laravel Blade Html 中使用單獨的 js 文件？

問題描述

編輯

1 個解決方案

解決方案1
0 2022-01-08 05:58:23

如何在 Laravel Blade Html 中使用單獨的 js 文件？

問題描述

編輯

1 個解決方案

解決方案1 0 2022-01-08 05:58:23

解決方案1
0 2022-01-08 05:58:23