Мой проект не определен в журнале консоли - PullRequest
Новая
       11

Мой проект не определен в журнале консоли

0 голосов
/ 27 сентября 2019

Я использую larave и vue.Моя HTML-тема создается с использованием многих плагинов jquery.Но jQuery не определяется массой в журнале консоли.Пожалуйста, объясните мне, как использовать jquery в проекте laravel и vue js.Это очень важно для меня.Спасибо заранее.

my app.js 

require('./bootstrap');

window.Vue = require('vue');
import VueRouter from 'vue-router';
Vue.use(VueRouter);

import {routes} from './route/routes.js';
Vue.component('adminmain', require('./components/admin/AdminMaster.vue').default);



const router = new VueRouter({
    routes, // short for `routes: routes`
    mode: 'history',
  });

const app = new Vue({
    el: '#app',
    router
});

my Bootstrap.js 

window._ = require('lodash');


try {
    window.$ = window.jQuery = require('jquery');
    window.Popper = require('popper.js').default;

    require('bootstrap');
    require('admin-lte');
} catch (e) {}


window.axios = require('axios');

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';


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');
}

Json 

"devDependencies": {
        "axios": "^0.18",
        "bootstrap": "^4.1.0",
        "cross-env": "^5.1",
        "jquery": "^3.2",
        "laravel-mix": "^4.0.7",
        "lodash": "^4.17.5",
        "popper.js": "^1.12",
        "resolve-url-loader": "^2.3.1",
        "sass": "^1.15.2",
        "sass-loader": "^7.1.0",
        "vue": "^2.5.17",
        "vue-template-compiler": "^2.6.10"
    },

введите описание изображения здесь

1 Ответ

0 голосов
/ 27 сентября 2019

Включить app.js, который содержит JQuery в верхней части HTML-файла и отложить его загрузку

Загрузка плагинов, требующих JQuery, перед загрузкой JQuery вызывает эту проблему 

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <!-- Include the script here -->
    <script src="{{ asset('js/app.js') }}" defer></script>
...