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

Question

我正在嘗試為 Laravel 中的每個 Blade View 使用不同的 JS 文件，以幫助保持項目結構的整潔。

我的問題是，當我嘗試在 Blade 視圖中從該 JS 文件訪問 function 時，控制台返回錯誤：

未捕獲的 ReferenceError：myFunc 未在 HTMLButtonElement.onclick 中定義

但是文件在那里，它記錄了來自該 js 文件的控制台消息。

這是我的文件和結構：

資源/js/index.js

console.log("Hello from index js");

function myFunc() {
    console.log("Hello");
}

資源/視圖/布局/master.blade.php

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Laravel</title>
    </head>
    <body>
       @yield('content')
       {{-- @yield('js') --}}
       @stack('js')
    </body>
</html>

資源/視圖/index.blade.php

@extends('layout.master')
@section('content')
    <h1>Works</h1>
    <button onclick="myFunc()">Click</button>
@endsection
@push('js')
<script src="{{ asset('js/index.js')}}"></script>
@endpush

webpackmix.mix.js

const mix = require("laravel-mix");

mix.js("resources/js/app.js", "public/js").postCss(
    "resources/css/app.css",
    "public/css",
    [
        //
    ]
);

mix.js("resources/js/index.js", "public/js");

Answer 1

您的 function 在主體內容后加載的腳本中定義，但您試圖在主體內容中訪問此 function。

嘗試切換到JS文件中按鈕的選擇器
或者在正文之前加載腳本同步（壞：延遲內容渲染）

Answer 2

@murrayOB 你可以在 public 中創建單獨的 js 文件，然后在 js 文件夾中創建它，然后將它包含在你的 default.blade.php 文件中<script src="{{asset('js/common-flow.js')}}"></script>之后，只需從寫入該特定通用流文件的刀片文件中調用任何 function

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

問題描述

2 個解決方案

解決方案1
0 2022-01-26 11:02:54

解決方案2
0 2022-12-01 06:56:18

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

問題描述

2 個解決方案

解決方案1 0 2022-01-26 11:02:54

解決方案2 0 2022-12-01 06:56:18

解決方案1
0 2022-01-26 11:02:54

解決方案2
0 2022-12-01 06:56:18