Question

我收到以下错误。

未捕获的错误：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。有人可以帮我解决这个问题吗？

由于

Answer 1

您的app.js包含jquery。如错误所述并在jquery之后加载bootstrap。

<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>

Answer 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引导程序错误

2 个答案: