我似乎无法从我的其他文件之一的 JS 包中调用方法 (all.js) .我正在使用 Laravel 5.4、VueJS2 和 VueRouter。这是一个以 Laravel 为后端的 SPA。
我收到以下错误:TypeError: $.LoadingOverlay is not a function
我正在使用 web pack 并像这样编译 Assets :
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');
负责拉入编译资源的blade文件:
<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> 从我的 Blade 页面调用该文件的方法。 all.js 之后的标签文件被拉入，并从那里调用它。
关于为什么会发生这种情况有什么想法吗？
最佳答案
正如它所说的那样，因为 $.LoadingOverlay 不是一个函数。
通过 webpack(通过 nodejs 完成)编译到 all.js 中的 jQuery 将导致 $ = require('jQuery') 与全局的不同通过 window.$
window.$ 正在引用 jQuery 1.11.0，而您的 app.js 中的那个正在引用使用 webpack 构建的 jQuery。
关于javascript - 从编译后的js文件中调用方法，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45618892/