Laravel 未捕获的 ReferenceError webpackJsonp 未定义在 app.js:1
Laravel Uncaught ReferenceError webpackJsonp is not defined at app.js:1
因此,当我测试我的 Laravel 5.4 网站时,我的浏览器控制台行出现以下错误:
Uncaught ReferenceError: webpackJsonp is not defined at app.js:1
现在,老实说,我对webpack和相关的几乎一无所知,我只是按照说明编译资产,通常一切正常...
无论如何...我正在使用 Laravel 5.4 并已将 bootstrap3 换成 bootstrap4。否则一切都与默认 laravel 设置中的几乎一样。
我的 webpack.mix.js
看起来像这样:
mix.js('resources/assets/js/app.js', 'public/js')
.extract(['vue','tether','bootstrap'])
.sass('resources/assets/sass/app.scss', 'public/css');
我的 assets/js/app.js
(为了便于阅读,删除了默认注释)
require('./bootstrap');
Vue.component('example', require('./components/Example.vue'));
const app = new Vue({
el: '#app'
});
我的 assets/js/bootstrap.js
(为了便于阅读,删除了默认注释)
window._ = require('lodash');
window.$ = window.jQuery = require('jquery');
require('bootstrap');
window.Vue = require('vue');
window.axios = require('axios');
window.axios.defaults.headers.common = {
'X-CSRF-TOKEN': window.Laravel.csrfToken,
'X-Requested-With': 'XMLHttpRequest'
};
我的主要布局blade文件在底部
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="/js/app.js"></script>
<script src="/js/vendor.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.2.7/raphael.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
如果你们能想到其他可能的原因,请告诉我,我会更新代码片段。
抱歉缺少其他信息,我四处寻找,老实说,我完全不知道可能出了什么问题或如何解决它。
而且我很愚蠢。没有正确阅读文档。
主要是说:
To avoid JavaScript errors, be sure to load these files in the proper order:
<script src="/js/manifest.js"></script>
<script src="/js/vendor.js"></script>
<script src="/js/app.js"></script>
我添加了 manifest.js 并重新排序,现在一切正常。
因此,当我测试我的 Laravel 5.4 网站时,我的浏览器控制台行出现以下错误:
Uncaught ReferenceError: webpackJsonp is not defined at app.js:1
现在,老实说,我对webpack和相关的几乎一无所知,我只是按照说明编译资产,通常一切正常...
无论如何...我正在使用 Laravel 5.4 并已将 bootstrap3 换成 bootstrap4。否则一切都与默认 laravel 设置中的几乎一样。
我的 webpack.mix.js
看起来像这样:
mix.js('resources/assets/js/app.js', 'public/js')
.extract(['vue','tether','bootstrap'])
.sass('resources/assets/sass/app.scss', 'public/css');
我的 assets/js/app.js
(为了便于阅读,删除了默认注释)
require('./bootstrap');
Vue.component('example', require('./components/Example.vue'));
const app = new Vue({
el: '#app'
});
我的 assets/js/bootstrap.js
(为了便于阅读,删除了默认注释)
window._ = require('lodash');
window.$ = window.jQuery = require('jquery');
require('bootstrap');
window.Vue = require('vue');
window.axios = require('axios');
window.axios.defaults.headers.common = {
'X-CSRF-TOKEN': window.Laravel.csrfToken,
'X-Requested-With': 'XMLHttpRequest'
};
我的主要布局blade文件在底部
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="/js/app.js"></script>
<script src="/js/vendor.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.2.7/raphael.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
如果你们能想到其他可能的原因,请告诉我,我会更新代码片段。
抱歉缺少其他信息,我四处寻找,老实说,我完全不知道可能出了什么问题或如何解决它。
而且我很愚蠢。没有正确阅读文档。
主要是说:
To avoid JavaScript errors, be sure to load these files in the proper order:
<script src="/js/manifest.js"></script>
<script src="/js/vendor.js"></script>
<script src="/js/app.js"></script>
我添加了 manifest.js 并重新排序,现在一切正常。