如何在 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