Question

我似乎无法从我的其他文件**中调用JS包中的方法。我使用的是Laravel 5.4，VueJS2和VueRouter。这是一个SPA，Laravel作为后端。

我收到以下错误：(all.js)

我正在使用网络包并编译这样的资产：

TypeError: $.LoadingOverlay is not a function

包含我尝试引入的代码的文件是mix.js([ 'resources/assets/js/bootstrap.js', 'resources/assets/js/helpers.js', '././node_modules/gasparesganga-jquery-loading-overlay/src/loadingoverlay.min.js', 'resources/assets/js/app.js', '././node_modules/moment/min/moment.min.js', '././node_modules/moment-duration-format/lib/moment-duration-format.js', ], 'public/js/all.js').version();文件。引用它的文件位于loadingoverlay.min.js下方。

我的app.js文件：

(app.js)

负责提取已编译资产的刀片文件：

import Vue from 'vue';
import VueRouter from 'vue-router';

var $ = require('jquery');

Vue.use(VueRouter);

const routes = [
  .. routes here
];


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

  router.beforeEach((to, from, next) => {
    console.log('Entering route');
    $.LoadingOverlay('show');
    next();
  });

  router.afterEach((to, from) => {
    console.log('Entered route');
    $.LoadingOverlay('hide');
  })

 const app = new Vue({
    router
  }).$mount('#app');

有趣的是，我可以通过在<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"> <meta name="description" content=""> <meta name="keywords" content=""> <meta name="author" content=""> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <link rel="stylesheet" href="{{ mix('css/all.css') }}"> <meta name="csrf-token" content="{{ csrf_token() }}"/> </head> <body> <div id="app"> <section class="container"> <div> <router-view></router-view> </div> </section> </div> <script src="{{ mix('js/all.js') }}"></script> </body> </html>文件被拉入后添加<script></script>标记从我的刀片页面调用该文件中的方法，并从那里调用它。

关于为什么会发生这种情况的任何想法？

Answer 1

正如它所说，因为$.LoadingOverlay不是一个功能。

通过webpack编译到你的all.js中的jQuery（通过nodejs完成）将使$ = require('jQuery')与通过window.$

全局公开的window.$不同

jQuery引用了jQuery 1.11.0，app.js中的一个引用了使用webpack构建的<p><b>Rating</b>: <?= $arr->rating; ?></p>。

从编译的js文件中调用方法

1 个答案: