jQuery 没有在控制台日志中定义我的项目答案

【问题标题】：jQuery is not defined my project in console logjQuery 没有在控制台日志中定义我的项目
【发布时间】：2020-01-27 19:54:06
【问题描述】：

我正在使用 larave 和 vue。我的 html 主题使用许多 jquery 插件创建。但是 jQuery 没有在控制台日志中定义质量。请指导我如何在 laravel 和 vue js 项目中使用 jquery。这对我来说非常重要。谢谢你提前。

我的 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
});

我的 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"
    },

enter image description here

【问题讨论】：

该错误表示使用前需要加载jQuery库

标签： jquery vue.js vue-router

【解决方案1】：

在 HTML 文件顶部包含包含 JQuery 的 app.js 并延迟其加载

在加载 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>

【讨论】：

编辑您的问题并包含 HTML 文件