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

【问题标题】：How to use seperate js files in Laravel Blade如何在 Laravel Blade 中使用单独的 js 文件
【发布时间】：2022-01-26 10:53:55
【问题描述】：

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

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

Uncaught ReferenceError: myFunc is not defined at 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>

资源/视图/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");

【问题讨论】：

标签： javascript php laravel laravel-blade

【解决方案1】：

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

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

【讨论】：

好的，我明白了，谢谢 Victor，但是为什么如果我将我的 JS 代码放在 index.blade.php 中的两个脚本标签之间，而不是将 src 提供给 JS 文件，它会起作用？
@MurrayOB，好像有工作变量提升
使用 document.querySelector 并添加一个 eventListener 有效。