如何在 Laravel Blade 中使用单独的 js 文件

Question

我正在尝试为 Laravel 中的每个 Blade View 使用不同的 JS 文件，以帮助保持项目结构整洁。

我的问题是，当我尝试在 Blade 视图中访问该 JS 文件的函数时，控制台 returns 出现以下错误：

未捕获的 ReferenceError：myFunc 未定义在 HTMLButtonElement.onclick

但是文件在那里并且它记录来自该 js 文件的控制台消息。

这是我的文件和结构：

resources/js/index.js

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

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

resources/views/layout/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>

resources/views/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

您在主体内容之后加载的脚本中定义的函数，但您试图在主体内容中访问此函数。

尝试切换到 JS 文件中按钮的选择器
或者在主体之前加载脚本同步（错误：延迟内容呈现）

如何在 Laravel Blade 中使用单独的 js 文件

How to use seperate js files in Laravel Blade

javascript

php

laravel

laravel-blade