Vue.js使用jQuery formBuilder插件时出现jQuery未定义错误求助

这个问题很典型，核心原因是form-builder.min.js依赖全局的jQuery变量，但你当前的配置里没有把jQuery挂载到全局window对象上，导致插件加载时找不到依赖。下面是具体的解决步骤：

1. 正确将jQuery暴露为全局变量 #

在你的resources/js/app.js中，导入jQuery后，需要把它赋值给window.jQuery和window.$——这是绝大多数jQuery插件的约定，它们会直接从全局作用域读取这两个变量。修改这部分代码：

import Vue from 'vue';
import jQuery from 'jquery'
// 新增这一行，把jQuery挂载到全局
window.$ = window.jQuery = jQuery;

// 注意：必须在挂载jQuery之后，再导入依赖它的form-builder
import './form-builder.min.js';

2. 调整组件内的代码 #

你的formBuilder.vue组件里，不需要再单独导入jQuery（已经全局可用了），而且要修正原组件里的错误标签——formBuilder是jQuery插件，不是Vue组件，需要提供一个DOM容器让它初始化：

<template>
  <div class="content">
    <!-- 提供一个空容器供formBuilder初始化 -->
    <div ref="formBuilderContainer"></div>
  </div>
</template>
<script>
export default {
  mounted() {
    // 用全局的$来初始化插件
    $(this.$refs.formBuilderContainer).formBuilder();
  }
}
</script>

3. 可选：将jQuery挂载到Vue原型（方便组件内调用） #

如果你想在Vue组件里更优雅地使用jQuery，可以把它挂载到Vue原型上，这样所有组件都能通过this.$访问：
在app.js中添加：

Vue.prototype.$ = jQuery;

之后组件内就可以这样写：

mounted() {
  this.$(this.$refs.formBuilderContainer).formBuilder();
}

验证步骤 #

1. 确保所有依赖的jQuery相关文件（比如jquery-ui，如果formBuilder需要的话）也在jQuery之后导入
2. 重新编译你的资源（比如运行npm run dev或者npm run watch）
3. 刷新页面，应该就能正常加载formBuilder了

内容的提问来源于stack exchange，提问作者DevD