從編譯的js文件調用方法

我似乎無法從我的其他文件(all.js)之一的JS包中調用方法。我正在使用Laravel 5.4，VueJS2和VueRouter。這是一個SPA，Laravel作爲後端。從編譯的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>標記後all.js文件被拉入，然後從那裏調用它。

關於爲什麼會發生這種情況的任何想法？

來源

2017-08-10 mdobrenko

停止使用多個版本的jQuery。 – Adam

就像它說的那樣，因爲$.LoadingOverlay不是函數。

的jQuery通過的WebPack（通過做的NodeJS）編譯到您的all.js將導致$ = require('jQuery')比一通過window.$

window.$全球暴露所引用的jQuery 1.11.0和您的應用程序內的一個不同.js引用了使用webpack構建的jQuery。

來源

2017-08-10 16:29:53 Adam

這樣做 - 謝謝！當時間限制解除時，將標記爲答案。 – mdobrenko

從編譯的js文件調用方法

回答

相關問題