【发布时间】：2020-01-06 20:55:57
【问题描述】：
我有一个 laravel 项目 (v5.8)，并且我使用它附带的默认引导程序 4 用于我的前端 css 框架。除了无神论的旋转木马，一切都像魅力一样运作。我怀疑它必须与 laravel 如何使用 mix 编译资产有关，因为如果我使用 CDN 版本的 bootstrap、jquery 等创建刀片视图，则轮播可以工作。但是，如果我使用 laravel mix 生成的 app.js，图像会堆叠在一起。但最奇怪的部分是轮播式的“工作”，因为堆叠的图像确实会滑动，例如，最初它向我显示按“40.jpg”、“41.jpg”和“42.jpg”顺序堆叠的三个，然后滑动，顶部是“41.jpg”，下方是“42.jpg”，最后当幻灯片显示“42.jpg”时，该过程会从三张图像重新开始。
这是我每个部分的代码：
/resources/views/test.blade.php：
@extends ('layouts.web')
@section('content')
<div class="container">
<div id="myCar" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="http://localhost:81/witinea/storage/public/img/gallery/general/40.jpg" class="d-block w-100" alt="Imagen 40">
</div>
<div class="carousel-item">
<img src="http://localhost:81/witinea/storage/public/img/gallery/general/41.jpg" class="d-block w-100" alt="Imagen 41">
</div>
<div class="carousel-item">
<img src="http://localhost:81/witinea/storage/public/img/gallery/general/42.jpg" class="d-block w-100" alt="Imagen 42">
</div>
</div>
<a class="carousel-control-prev" href="#myCar" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#myCar" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
@endsection
@section('footerScripts')
@parent
@endsection
在 layouts.web 中，我定义了我的页眉、页脚、菜单、指向我的样式的链接、脚本等。
/resources/js/app.js：
require('./bootstrap');
import $ from 'jquery';
window.$ = window.jQuery = $;
/resources/js/bootstrap.js：
window._ = require('lodash');
/**
* We'll load jQuery and the Bootstrap jQuery plugin which provides support
* for JavaScript based Bootstrap features such as modals and tabs. This
* code may be modified to fit the specific needs of your application.
*/
try {
window.Popper = require('popper.js').default;
window.$ = window.jQuery = require('jquery');
require('bootstrap');
} catch (e) {}
最后，我用 laravel mix 和 webpack 编译我的资产：
/webpack.mix.js:
const mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
mix.setPublicPath('public');
mix.setResourceRoot('../');
我找不到问题出在哪里。在我看来，Bootstrap 加载正确，因为我在菜单、标题、布局网格中使用了引导程序类。我认为 jquery 也可以正确加载，因为我有一个“转到顶部”箭头，在使用 jquery 滚动时隐藏/显示。所以我完全迷失了，我不知道为什么图像会堆叠在一起。
很抱歉这篇大文章，但由于我无法确定问题可能出在哪里，我试图做到最具体。感谢您的帮助。
编辑：我忘了包含laravel生成的页面的源代码，也许错误更明显：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="Fp766WwnOt1vKyUE4fe7bYsRk0VNtBhRQYBmSKfN">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
<title>#</title>
<link rel="apple-touch-icon" sizes="57x57" href="http://localhost:81/witinea/public/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="http://localhost:81/witinea/public/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="http://localhost:81/witinea/public/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="http://localhost:81/witinea/public/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="http://localhost:81/witinea/public/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="http://localhost:81/witinea/public/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="http://localhost:81/witinea/public/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="http://localhost:81/witinea/public/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="http://localhost:81/witinea/public/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="http://localhost:81/witinea/public/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="http://localhost:81/witinea/public/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="http://localhost:81/witinea/public/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="http://localhost:81/witinea/public/favicon-16x16.png">
<link rel="manifest" href="http://localhost:81/witinea/public/manifest.json">
<link rel="icon" href="http://localhost:81/witinea/public/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="http://localhost:81/witinea/public/favicon.ico" type="image/x-icon" />
<link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
<script>
</script>
<link href="http://localhost:81/witinea/public/css/app.css" rel="stylesheet" />
</head>
<body>
<a href="#" id="return-to-top"><i class="fas fa-chevron-up"></i></a>
<header>
<div class="container-fluid">
<nav id="main" class="navbar navbar-expand-lg navbar-light bg-light fixed-top navbar-custom">
<div class="container-fluid">
<a href="http://localhost:81/witinea/public/index.php" class="navbar-brand"><img src="http://localhost:81/witinea/public/img/witinea_logo.png" width="313" height="100" class="img-fluid"></a>
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#w0-collapse" aria-controls="w0-collapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div id="w0-collapse" class="collapse navbar-collapse">
<ul id="w1" class="navbar-nav">
<li class="nav-item h5 font-weight-bold"><a class="nav-link active text-primary" href="http://localhost:81/witinea/public/index.php#QuienesSomos">Quiénes Somos</a></li>
<li class="nav-item h5 font-weight-bold"><a class="nav-link text-primary" href="http://localhost:81/witinea/public/index.php#Servicios">Nuestros Servicios</a></li>
<li class="nav-item h5 font-weight-bold"><a class="nav-link text-primary" href="http://localhost:81/witinea/public/index.php#Clientes">Clientes</a></li>
<li class="nav-item h5 font-weight-bold"><a class="nav-link text-primary" href="http://localhost:81/witinea/public/index.php/galeria">Galerías</a></li>
<li class="nav-item h5 font-weight-bold"><a class="nav-link text-primary" href="http://localhost:81/witinea/public/index.php#Contacto">Contáctanos</a></li>
</ul>
<ul id="w2" class="navbar-nav ml-auto">
<li class="nav-item h4"><a class="nav-link text-info" href="https://www.facebook.com/ConsultoresWitinea/" target="_blank"><i class="fab fa-facebook-f "></i></a></li>
<li class="nav-item h4"><a class="nav-link text-info" href="" target="_blank"><i class="fab fa-youtube"></i></a></li>
</ul>
</div>
</div>
</nav>
</div>
</header>
<main>
<div class="container">
<div id="myCar" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="http://localhost:81/witinea/storage/public/img/gallery/general/40.jpg" class="d-block w-100" alt="Imagen 40">
</div>
<div class="carousel-item">
<img src="http://localhost:81/witinea/storage/public/img/gallery/general/41.jpg" class="d-block w-100" alt="Imagen 41">
</div>
<div class="carousel-item">
<img src="http://localhost:81/witinea/storage/public/img/gallery/general/42.jpg" class="d-block w-100" alt="Imagen 42">
</div>
</div>
<a class="carousel-control-prev" href="#myCar" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#myCar" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</main>
<footer class="bg-secondary">
<div class="container">
<div class="row">
<div class="col-5 small text-light">
Copyright © 2019
<a class="text-light pl-2" href="#" target="_blank"><i class="fab fa-facebook-f "></i></a>
<a class="text-light pl-2" href="" target="_blank"><i class="fab fa-youtube"></i></a>
</div>
</div>
</div>
</footer>
<script src="http://localhost:81/witinea/public/js/app.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/additional-methods.min.js"></script>
<script>
$(window).scroll(function() {
if ($(this).scrollTop() >= 50) { // If page is scrolled more than 50px
$('#return-to-top').fadeIn(200); // Fade in the arrow
} else {
$('#return-to-top').fadeOut(200); // Else fade out the arrow
}
});
$('#return-to-top').click(function() { // When arrow is clicked
$('body,html').animate({
scrollTop : 0 // Scroll to top of body
}, 500);
});
</script>
</body>
</html>
【问题讨论】：