Vue js - 获取未捕获的 ReferenceError：未定义 jQuery答案

【问题标题】：Vue js - Getting Uncaught ReferenceError: jQuery is not definedVue js - 获取未捕获的 ReferenceError：未定义 jQuery
【发布时间】：2020-06-21 09:29:12
【问题描述】：

我是 Vue.js 的新手，正在尝试创建一个使用 jQuery formBuilder 插件的自定义组件。当我将组件文件包含在另一个组件中时，出现错误：

未捕获的 ReferenceError：jQuery 未在 /resources/js/form-builder.min.js 中定义

我创建了一个名为 formBuilder.vue 的自定义组件。下面是组件代码：

<template>
   <div class="content">
      <formBuilder/>
   </div>
</template>
<script>
   // import './jquery.min.js';
   // import './jquery-ui.min.js';
   // import './form-builder.min.js';
   export default {      
       created() {

       },
       data() {
           return { 

           }
       },
       mounted() {
         jQuery(this.$el).formBuilder();
       },
       methods: {
       }
   }
</script>

在resource/js/app.js中的app.js文件中，我称这个vue被其他组件递归使用：

window.Vue = require('vue');
require('./bootstrap');
require('admin-lte');
require('./datatable');
import router from './router';
import Datepicker from 'vuejs-datepicker';
import CKEditor from 'ckeditor4-vue';
import FullCalendar from 'vue-full-calendar';
import 'fullcalendar/dist/fullcalendar.css'
import Vue from 'vue';
import jQuery from 'jquery'
import './form-builder.min.js';
Vue.use(VueRouter)
Vue.use(FullCalendar);
Vue.use(CKEditor)
Vue.component("vue-datepicker", Datepicker);
Vue.component('FormBuilder', require('./components/tools/formBuilder.vue').default);

const app = new Vue({
  el: '#app',
  router
});

这是我使用 formbuilder 组件的组件文件

  <template>
    <div class="content-wrapper">
        <div class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1 class="m-0 text-dark">Questionnaire</h1>
                    </div>
                    <div class="col-sm-6"></div>
                </div>
            </div>
        </div>
        <div class="content">
            <div class="container-fluid">
                <div class="row justify-content-center">
                    <div class="col-md-12">
                        <div class="card">
                            <FormBuilder/> <!--- used formbuilder component --->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        created() {
        },
        data() {
            return {

            }
        },
        methods: {

        }
    }
</script>

我也附上了错误。

你们能帮我找出我做错的地方吗？

提前致谢。

【问题讨论】：

这能回答你的问题吗？ JQuery - $ is not defined

标签： javascript jquery vue.js vuejs2 vue-component

【解决方案1】：

将对象导入 Vue 的应用 JS 不会自动生成该对象以供其他组件使用。

至少有两种方法可以做到这一点（尽管我建议避免所有这些，只在需要它的组件中导入jQuery）：

选项 1：Vue.prototype

在您的应用程序 JS 中，导入后将 jQuery 添加到 Vue 原型中，这将使每个组件都可以使用 this.jQuery 语法访问它：

Vue.prototype.jQuery = jQuery

选项 2：window 对象

或者，您可以在导入后将其添加到窗口对象中并像window.jQuery一样使用它：

window.jQuery = jQuery

选项 3：单独导入

将它简单地导入到使用它的组件中可能更具可读性/可维护性：

import jQuery from 'jquery'

然后您可以将其与示例中的语法一起使用。

【讨论】：

只有选项 2 对我有用。
@Nowdeen - 所有三个工作，你可能在尝试实现其他人时犯了一个错误，或者你的编程环境可能受到某种限制。

【解决方案2】：

这对我有用（Vue 3）出于某种原因，我不得不停止 cli 并重新启动

window.$ = window.jQuery = require('jquery');

Eslint 可能会返回“意外的顶级属性”“$”。你需要在你的 package.json 中插入一个异常

"env": {
    ...
    "jquery": true,
 },

重要的是要知道 jquery 只能在 .vue 文件中使用。因此，您的扩展和库可能会报告错误。在这些情况下，您将有 2 个选择：

将库转换为 .vue 模板
在它们之上进行本地导入。

import jQuery from 'jquery'

【讨论】：