laravel 5加载但不执行js文件答案

【问题标题】：laravel 5 loading but not executing js fileslaravel 5加载但不执行js文件
【发布时间】：2018-06-03 11:34:45
【问题描述】：

这几天一直在为此苦苦挣扎。

我已经安装了一个全新的 laravel 5.5 应用程序，我打算在其中使用 VueJS。 Onfurtunately 我无法让它工作，因为它正在加载文件但没有执行它们。

所以我唯一的解决方案是使用普通的 JS 文件。所以我有两个文件：

js/app.js
js/script.js

app.js：

$(document).ready(function(){
    console.log('app test js');
});

alert('app loaded');

script.js:

$(document).ready(function(){
    console.log('script test js');
});

alert('script loaded');

在我的控制台中，我可以看到“$document ready”，但没有为 js/app.js 和 js/script.js 显示警报或 console.log。我可以看到脚本已加载并且我的代码存在。

真的希望有人可以帮助我，因为我现在无法继续。

下面是所有用到的文件。

我有以下文件夹结构：

views/directevents/index.blade.php

index.blade.php

@extends('directevents.components.app')

@section('title', 'home')

@section('content')
<h1 class="page-title">
    Welkom bij Direct Events
</h1>

<p>
    Direct events is een evenementen bureau dat zich richt op thema evenementen.
    Het bedrijf bestaat uit drie ondernemers met een passie voor organiseren. Ons
    doel is om zowel de standhouders als de bezoekers een onvergetelijke dag te
    bezorgen.
</p>

<div id="event-carousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
        <li data-target="#event-carousel" data-slide-to="0" class="active">
 </li>
        <li data-target="#event-carousel" data-slide-to="1"></li>
        <li data-target="#event-carousel" data-slide-to="2"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner">
        <div class="item active text-center">
            <a href="hippiemarkt-amsterdam-xl">
                <img src="{{ asset('images/hippiemarkt-amsterdam-xl.png')                 
}}" alt="hippiemarkt amsterdam XL">
            </a>
        </div>

        <div class="item text-center">
            <a href="hippiemarkt-amsterdam-xl">
                <img src="{{ asset('images/hippiemarkt-amsterdam-xl.png') 
}}" alt="Chicago">
            </a>
        </div>

        <div class="item text-center">
            <a href="hippiemarkt-amsterdam-xl">
                <img src="{{ asset('images/hippiemarkt-amsterdam-xl.png') 
 }}" alt="New York">
            </a>
        </div>
    </div>

    <!-- Left and right controls -->
    <a class="left carousel-control" href="#event-carousel" data-
 slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#event-carousel" data-
slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
        <span class="sr-only">Next</span>
    </a>
</div>

<div class="row pages">
    <div class="col-sm-4 text-center">
        <a href="sponsoren">
            <img src="{{ asset('images/sponsoren.png') }}" alt="sponsoren">
            <h3>
                Sponsoren
            </h3>
        </a>
    </div>
    <div class="col-sm-4 text-center">
        <a href="standhouders">
            <img src="{{ asset('images/standhouders.png') }}" 
alt="standhouders">
            <h3>
                Standhouders
            </h3>
        </a>
    </div>
    <div class="col-sm-4 text-center">
        <a href="partners">
            <img src="{{ asset('images/partners.png') }}" alt="partners">
            <h3>
                Partners
            </h3>
        </a>
    </div>
</div>
@endsection

因为它扩展了views/directevents/components/app.blade.php，所以我也会在这里发布：

<!doctype html>
<html lang="{{ app()->getLocale() }}">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Direct Events - @yield('title')</title>

    <link rel="stylesheet" 
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/app.css') 
}}">
</head>
<body class="{{ $page }}">
    <div id="wrapper" class="container">
        <div v-if="Math.random() > 0.5">
            Now you see me
        </div>
        <div v-else>
            Now you don't
        </div>

        <header>
            @include('directevents.components.header')
        </header>

        @include('directevents.components.navbar')

        <div class="content">
            @yield('content')
        </div>

        <footer>
            @include('directevents.components.footer')
        </footer>

        @include('directevents.components.popups')
    </div>

    <!-- <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-
1.12.4.min.js"></script> -->
    <script
    src="https://code.jquery.com/jquery-3.2.1.min.js"
    integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
    crossorigin="anonymous"></script>
    <script 
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
    <script href="js/app.js"></script>
    <script href="js/script.js"></script>
    <script>
            $(document).ready(function(){
                console.log('$document ready');
            });
    </script>
</body>
</html>

【问题讨论】：

标签： javascript jquery laravel laravel-5

【解决方案1】：

Laravel 5.5 使用 Laravel Mix。如果您希望它完全发挥作用，您应该探索它是如何工作的。

 Here's what you need to do:
  1. Install npm via nodejs installer
  2. npm install
  3. Compile your resources using npm run <config> (ex. npm run dev)

【讨论】：

【解决方案2】：

您的脚本包含不正确，请参阅：https://www.w3schools.com/tags/att_script_src.asp

你有：

<script href="js/app.js"></script>

应该是：

<script src="js/app.js"></script>

注意“src”

在 Chrome 中按 F12 并重新加载页面，在 Sources 下查看它们是否已正确加载。

【讨论】：

【解决方案3】：

答案有多容易。

<script href="js/app.js"></script>

应该是

<script src="js/app.js"></script>

【讨论】：