Rails项目中Active Admin与jQuery冲突问题求助

我之前也踩过一模一样的坑！核心问题就是Active Admin的active_admin/base默认会打包一套自己的jQuery（通常是旧版本），和你应用里引入的jQuery重复加载，导致全局的$或jQuery变量被覆盖，两边的功能都没法正常工作。下面是我亲测有效的解决步骤：

1. 让Active Admin复用应用的jQuery #

首先修改Active Admin的初始化配置，禁止它加载自带的jQuery。打开config/initializers/active_admin.rb，添加这行配置：

# 告诉Active Admin不要加载自带的jQuery和jQuery UI，复用应用里的版本
config.javascripts = ActiveAdmin::JavaScripts.excluding('jquery', 'jquery-ui')

2. 调整Active Admin的JS入口文件 #

接下来修改app/assets/javascripts/active_admin.js，把原来的//= require active_admin/base替换成：

//= require active_admin/application

这个指令会加载Active Admin所有必需的JS组件，但会跳过我们刚才排除的jQuery和jQuery UI，转而使用应用里的版本。

3. 确保应用的jQuery加载顺序正确 #

检查你的application.js，确保jQuery是第一个被加载的（这本来就是前端依赖加载的最佳实践），目前你的顺序没问题，但再确认下：

//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require jquery-fileupload/basic
//= require cloudinary/jquery.cloudinary
//= require attachinary
//= require bootstrap-datepicker
//= require lunches
//= require_tree .

如果你的应用之前没引入jQuery UI（Active Admin的部分功能依赖它），记得在application.js里加上//= require jquery-ui，放在jquery之后即可。

4. 验证与排坑 #

• 重启你的Rails服务器，先测试应用前端的Cloudinary上传、datepicker、模态框功能，确认正常工作。
• 再登录Active Admin，检查它的模态框、批量操作、筛选器这些依赖jQuery的功能是否正常。

如果遇到Active Admin功能异常，大概率是jQuery版本兼容问题：

• 如果你用的是jQuery 3.x，确保你的Active Admin版本是2.9.0以上（这个版本开始正式支持jQuery 3.x），如果版本太旧，升级Active Admin到最新稳定版就行。
• 要是升级后还有问题，可以尝试把应用的jQuery降级到2.x版本，先保证Active Admin能正常运行，再慢慢找兼容方案。

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