Ruby on Rails新手遇JavaScript功能失效：Bootstrap下拉不显示、link_to参数无效

核心问题排查与修复 #

• 文件路径错误
  你标注的assets/javascript/packs/application.js是错误路径，Rails 6+默认使用Webpacker管理JS资源时，pack入口文件必须放在app/javascript/packs/application.js路径下。放在assets目录下的JS文件不会被Webpacker编译，导致你写的所有JS配置完全不生效。
• 无效指令与库冲突
  Webpacker环境不支持Sprockets（Asset Pipeline）的//= require系列加载指令，这部分注释不会生效。同时你同时引入了旧版jquery_ujs和官方新版@rails/ujs，两个UJS库功能重复会发生冲突，直接导致link_to的method:参数失效。
  修复方法：直接删除application.js开头的以下4行代码：

  //= require jquery
  //= require jquery_ujs
  //= require jquery-ui
  //= require_tree .
  

Bootstrap下拉菜单失效修复 #

• 先确认你安装的Bootstrap版本：
  • 如果是Bootstrap 4：将下拉菜单标签的data-bs-toggle属性改为data-toggle，Bootstrap 4不需要带bs后缀
  • 如果是Bootstrap 5：需要手动监听Turbolinks加载事件初始化组件，在application.js末尾添加以下代码：

  document.addEventListener("turbolinks:load", () => {
    const dropdowns = document.querySelectorAll('.dropdown-toggle')
    dropdowns.forEach(dropdown => new bootstrap.Dropdown(dropdown))
  })
  

额外校验项 #

• 执行yarn add @rails/ujs turbolinks确认两个核心依赖已正确安装
• 确认application.html.erb中的javascript_pack_tag放在</body>闭合标签之前，若放在<head>中需要添加defer属性
• 所有配置修改完成后，执行rails assets:clobber清理旧的编译缓存，再重启Rails服务和Webpack服务即可

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