Laravel 5.5 引导错误
Posted
技术标签:
【中文标题】Laravel 5.5 引导错误【英文标题】：Laravel 5.5 bootstrap error 【发布时间】：2018-02-13 07:34:50 【问题描述】：我遇到了错误。
未捕获的错误：Bootstrap 的 javascript 需要 jQuery。 jQuery 必须是 包含在 Bootstrap 的 JavaScript 之前。
app.js
require('./bootstrap');
window.Vue = require('vue');
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
import VueAxios from 'vue-axios';
import axios from 'axios';
Vue.use(VueAxios, axios);
import App from './App.vue';
import Login from './components/Login.vue';
import Register from './components/Register.vue';
import Activity from './components/Activity.vue';
import SelectPersons from './components/SelectPersons.vue';
const routes = [
name: 'Login',
path: '/',
component: Login
,
name: 'Register',
path: '/register',
component: Register
,
name: 'Activity',
path: '/activity',
component: Activity
,
name: 'SelectPersons',
path: '/selectpersons',
component: SelectPersons
];
const router = new VueRouter( mode: 'history', routes: routes);
new Vue(Vue.util.extend( router , App)).$mount('#app');
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.$ = window.jQuery = require('jquery');
require('bootstrap-sass');
catch (e)
window.Vue = require('vue');
/**
* We'll load the axios HTTP library which allows us to easily issue requests
* to our Laravel back-end. This library automatically handles sending the
* CSRF token as a header based on the value of the "XSRF" token cookie.
*/
window.axios = require('axios');
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
/**
* Next we will register the CSRF Token as a common header with Axios so that
* all outgoing HTTP requests automatically have it attached. This is just
* a simple convenience so we don't have to attach every token manually.
*/
let token = document.head.querySelector('meta[name="csrf-token"]');
if (token)
window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
else
console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
/**
* Echo exposes an expressive API for subscribing to channels and listening
* for events that are broadcast by Laravel. Echo and event broadcasting
* allows your team to easily build robust real-time web applications.
*/
// import Echo from 'laravel-echo'
// window.Pusher = require('pusher-js');
// window.Echo = new Echo(
// broadcaster: 'pusher',
// key: 'your-pusher-key'
// );
这里是加载每个 vue 组件或刀片模板页面的文件。
<html>
<head>
Html::style('/css/bootstrap.css')
Html::style('/css/style.css')
Html::script('/js/bootstrap.js')
</head>
<body>
<div id="app">
</div>
<script src="asset('js/app.js')"></script>
</body>
</html>
我正在使用 Laravel 和 vue。谁能帮我解决这个问题？
谢谢
【问题讨论】：
你至少应该发布你的 app.js / boostrap.js 文件 还包括你包含js库的布局文件 @FrankProvost 请立即查看。 @Yashvantsinh 请立即查看。 @Hitendra 您的刀片文件中的 HTML::script('/js/jquery.js') 文件在哪里？
【参考方案1】：
您的 app.js 包含 jquery。照错误说的做，在 jquery 之后加载引导程序。
<html>
<head>
Html::style('/css/bootstrap.css')
Html::style('/css/style.css')
</head>
<body>
<div id="app">
</div>
<script src="asset('js/app.js')"></script>
Html::script('/js/bootstrap.js')
</body>
</html>
【讨论】：
这解决了 jQuery 错误，但现在出现了其他错误。 “未捕获的错误：引导下拉菜单需要 Popper.js” 还有一个问题。您是如何确定 app.js 包含 jquery 的？ 您已将其添加到您的bootstrap.js 文件中。 window.$ = require('jQuery');
你能告诉我为什么我收到关于 popper.js 的其他错误吗？我会接受你的回答，因为它解决了我提出的问题。
从您所展示的内容来看，我看不到 popper.js 库。因此，我无法帮助您-对不起。您可能需要在加载 bootstrap 之前加载 popper.js。尝试通读引导标志【参考方案2】：
Bootstrap 需要 jQuery 才能运行其某些功能，例如 dropdown。错误显示"Uncaught Error: Bootstrap's JavaScript requires jQuery. jQuery must be included before Bootstrap's JavaScript."。所以首先，需要 jquery 库，然后是 bootstrap.min.js 或 bootstrap.js。如果您对此有任何问题，请随时发表评论。还有一件事，最好将所有JS 文件放在</body> 之前。
试试这个
<html>
<head>
Html::style('/css/bootstrap.css')
Html::style('/css/style.css')
</head>
<body>
<div id="app">
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
Html::script('/js/bootstrap.js')
<script src="asset('js/app.js')"></script>
</body>
</html>
【讨论】：
以上是关于Laravel 5.5 引导错误的主要内容，如果未能解决你的问题，请参考以下文章
从 laravel 5 升级到 laravel 5.5 导致错误参数 1 传递给 App\Exceptions\Handler::report()