Vue.js项目集成jQuery UI AutoComplete报错：.autocomplete is not a function

我来帮你排查这个常见问题，.autocomplete is not a function 本质上是jQuery UI的Autocomplete模块没有成功挂载到jQuery实例上导致的，下面是几个针对性的排查方向和解决办法：

1. 移除冗余的DOM就绪嵌套 #

Vue的mounted钩子已经确保当前组件的DOM完全渲染完成，你不需要再嵌套$(document).ready()和$(function(){})——这种嵌套可能会推迟初始化时机，甚至和Vue的生命周期冲突。

修改你的mounted代码：

mounted: function() {
  console.log("jQuery Version: " + $().jquery);
  // 先验证Autocomplete是否加载
  if ($.fn.autocomplete) {
    console.log("autocomplete exists");
    var availableTags = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Erlang",
      "Fortran",
      "Groovy",
      "Haskell",
      "Java",
      "JavaScript",
      "Lisp",
      "Perl",
      "PHP",
      "Python",
      "Ruby",
      "Scala",
      "Scheme"
    ];
    $("#tags").autocomplete({
      source: availableTags
    });
  } else {
    console.log("autocomplete not found");
  }
}

2. 确保jQuery UI模块正确导入 #

jQuery UI现在采用模块化设计，全量导入import 'jquery-ui'在某些打包工具（如Webpack）下可能无法正确加载所有组件。建议单独导入Autocomplete模块：

import $ from 'jquery'
// 替换全量导入为单独导入Autocomplete
import 'jquery-ui/ui/widgets/autocomplete'
// 如果需要样式的话，还要导入对应的CSS
import 'jquery-ui/themes/base/autocomplete.css'

这样能确保只有你需要的模块被加载，避免全量导入可能带来的冲突或遗漏。

3. 检查jQuery与jQuery UI的版本兼容性 #

版本不匹配是常见的坑：比如jQuery UI 1.13.x要求jQuery 3.6.x及以上版本。你可以：

• 查看package.json中jquery和jquery-ui的版本号，确保二者兼容
• 在控制台执行console.log($.ui.version)，验证jQuery UI是否成功加载

4. 配置打包工具确保jQuery全局可用 #

如果使用Webpack，需要确保jQuery被注册为全局变量，这样jQuery UI才能正确挂载到jQuery实例上。在webpack.config.js中添加：

const webpack = require('webpack');

module.exports = {
  // ...其他配置
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery'
    })
  ]
};

如果是Vite，可以在vite.config.js中配置：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      'jquery': 'jquery/dist/jquery.min.js'
    }
  },
  define: {
    'window.jQuery': 'jquery'
  }
})

5. 排查重复导入jQuery的问题 #

如果项目中同时通过CDN和npm导入了jQuery，会导致多个jQuery实例存在——jQuery UI挂载到其中一个实例，而你的代码使用的是另一个，自然找不到autocomplete方法。可以在控制台验证：

console.log(window.jQuery === $)

如果输出false，说明存在重复导入，需要移除其中一种导入方式。

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