laravel 5加载但不执行js文件

问题描述 投票：0回答：3

几天来一直在努力奋斗。

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

所以我唯一的解决方案是使用普通的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
3个回答
1
投票

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

你有：

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

应该：

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

注意“src”

在Chrome中点击F12并重新加载页面，请在“源”下查看是否已正确加载。

0
投票

答案有多容易。

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

应该

<script src="js/app.js"></script>
0
投票

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)
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.