javascript - Laravel Mix Uncaught ReferenceError: $ is not defined
问题描述
我已经搜索和搜索,但在 SO 上找不到我的问题的答案。所以这是我的问题。我正在尝试使用 Laravel Mix 全局加载 jQuery。我试过修改各种文件,但似乎没有任何效果......我仍然收到“$未定义”错误。
这是我的代码。
引导程序.js
window._ = require('lodash');
window.Popper = require('popper.js').default;
try {
window.$ = window.jQuery = require('jquery');
require('bootstrap');
} 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');
}
webpack.mix.js
mix.js('resources/assets/js/app.js', 'public/js')
.js('resources/assets/js/select2.min.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css')
.sass('resources/assets/sass/admin/app.scss', 'public/css/admin')
.copy('resources/assets/css/fontawesome.css', 'public/css')
.copy('resources/assets/css/select2.min.css', 'public/css')
.copy('resources/assets/webfonts', 'public/webfonts')
.copy('resources/assets/js/tinymce', 'public/js/tinymce');
mix.browserSync('http://localhost:8000');
我得到的错误:
未捕获的 ReferenceError:$ 未定义
@section('scripts') 中 create.blade.php 内部的代码
<script>
$(function(){
alert();
});
</script>
{{-- Tiny MCE --}}
<script src="/js/tinymce/tinymce.min.js"></script>
<script>
tinymce.init({
selector:'textarea',
plugins: 'link',
menubar: false,
branding: false,
resize: false,
statusbar: false,
force_br_newlines : false,
force_p_newlines : false,
forced_root_block : '',
toolbar: ['undo redo | cut copy paste | removeformat',
'bold italic underline | link | outdent indent | alignleft aligncenter alignright alignjustify alignnone',],
});
</script>
{{-- Image Javascript --}}
<script type="text/javascript">
$(function() {
// We can attach the `fileselect` event to all file inputs on the page
$(document).on('change', ':file', function() {
var input = $(this),
numFiles = input.get(0).files ? input.get(0).files.length : 1,
label = input.val().replace(/\\/g, '/').replace(/.*\//, '');
input.trigger('fileselect', [numFiles, label]);
});
// We can watch for our custom `fileselect` event like this
$(document).ready( function() {
$(':file').on('fileselect', function(event, numFiles, label) {
var input = $(this).parents('.input-group').find(':text'),
log = numFiles > 1 ? numFiles + ' files selected' : label;
if( input.length ) {
input.val(log);
} else {
if( log ) alert(log);
}
});
});
});
</script>
最后是我的布局文件
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
{{-- Page Specific Scripts --}}
@yield('scripts')
</body>
我究竟做错了什么?!?!?
Console.log(e) 什么都不返回...这意味着 jquery 应该正确加载但不是。
解决方案
如果您jquery
在 laravel mix 中使用,请以这种方式导入app.js
:
window.$ = window.jQuery = require('jquery');
推荐阅读
- c++ - 在转换为 PUCHAR 并打印到控制台时,硬编码字符串给出的结果与从控制台读取的字符串不同
- java - XML 验证 - 未声明元素
- json - Google Assistant SDK 中的多个命令
- mongodb - 使用 ssl 从 spark 连接到 mongo docker
- php - 未连接适配器;跳过布局和 org.json.JSONException:Java.lang.String 类型的连接值无法转换为 JSONArray
- mysql - 如何将文件加载到特定列的 mysql 表中?
- sql - 选择语句给出额外的 Null 行
- excel - Excel随机更改字体
- jquery - 如何使用 CSS / jquery 对由用户输入触发的突出显示的文本进行非常短的放大缩小效果?
- android - xml-layout: ScrollView 剪切嵌入 CardView 项的底部