Javascript 功能在 localhost 上工作，但在部署到 Heroku 时不工作答案

【问题标题】：Javascript features work on localhost but not when deployed to HerokuJavascript 功能在 localhost 上工作，但在部署到 Heroku 时不工作
【发布时间】：2012-04-30 05:17:09
【问题描述】：

我注意到当我部署到 Heroku 时，javascript 功能不起作用（例如 Bootstrap Popover、Buttons 等）。我正在使用 rails 3.2.2，ruby 1.9.3。这些功能在本地主机上工作。部署到 Heroku 时似乎没有显示任何错误（这些功能根本不显示）。

有什么想法吗？谢谢！

【问题讨论】：

如果你把一些console.log行放进去，你会得到什么吗？
我对 Heroku 一无所知（我以前第一次听说过这个名字），但 JavaScript 是在客户端执行的。因此，只要您使用相同的浏览器并且 JavaScript 代码相同，您就应该获得相同的行为。尝试查看两种方案的源代码（从右键菜单或浏览器中的编辑菜单）并比较差异。
Javascript 文件是否被正确提取（Firebug 说什么）？如果是这样，您是否有任何特定于 localhost 域的代码？
jimw：我测试了 console.log，我在 localhost 中得到了输出，但部署到 heroku 时什么也没有。
使用 Chrome，我在检查器中看到的错误是：“Uncaught TypeError: Object [object Object] has no method 'popover'

标签： javascript heroku twitter-bootstrap popover

【解决方案1】：

我也有类似的问题，但问题也发生在本地主机上。

您可能正在使用 rails-bootstrap gem。它安装了一个文件 bootstrap.coffee.js 这个文件是罪魁祸首。它使用了 .popover 并且不包括相关插件。我评论了这一点，因为我没有使用它，但你应该考虑包括用于引导的弹出插件。

【讨论】：

我按照你说的做了，一旦我删除了我的咖啡文件，一切正常，但我想知道你有任何来源支持你的说法吗？跨度>

【解决方案2】：

我遇到了完全相同的问题（我对 Rails 很陌生）。我最终通过重新排列 application.js 中文件的顺序解决了这个问题：

//= require jquery
//= require jquery_ujs
//= require twitter/bootstrap

为了使 javascript 在开发中工作，“require jquery”需要位于“require twitter/bootstrap”之后。在生产中，jquery 需要放在第一位。不确定是什么原因造成的，但现在部署到 Heroku 时它可以工作。

我用了这两个帖子：

javascript - Twitter bootstrap jquery plugins not compiled for production

twitter bootstrap drop down suddenly not working

【讨论】：

Rails 4.2.5 更新：//= 需要 jquery //= 需要 jquery_ujs //= 需要引导程序 //= 需要 angular //= 需要 'leaflet.js' //= 需要传单 // = 要求树。下拉菜单在 Heroku 上工作，但引导程序需要在 localhost 上排在第二位。有没有办法解决这个问题，或者至少让它在 Heroku 和 localhost 上工作而不改变 application.js？ PS。似乎无法格式化 cmets。

【解决方案3】：

手动预编译对我有用。

bundle exec rake assets:precompile 在你推送到 heroku 之前。

【讨论】：

如果您手动包含 bootstrap.js 和 bootstrap.css 而不是使用 gem，这似乎是可行的方法
heroku 为你做这些

【解决方案4】：

检查您的 production.rb 文件。我认为这条线需要：

config.assets.compile = true

我相信这默认设置为 false。

【讨论】：

警告：Richard Hulse 建议不要在此处开启此功能：stackoverflow.com/questions/8821864/…

【解决方案5】：

请记住，您通常在 localhost 上执行的所有操作都必须使用 heroku。确保你heroku run rake assets:precompile。

【讨论】：

【解决方案6】：

为我的应用检查了缩小的js，文件中出现了两次popover。

确保您的 javascript 资产中仅声明了 bootstrap 和 boostrap-sprockets 之一

来自文档：

bootstrap-sprockets 和 bootstrap 不应同时包含在 application.js 中。

bootstrap-sprockets 提供单独的 Bootstrap Javascript 文件（例如，alert.js 或 dropdown.js），而 bootstrap 提供了一个包含所有 Bootstrap Javascript 的串联文件。

确保只有 bootstrap 和 bootstrap sprockets 之一

参考：bootstrap-sass github issue 和 here。

【讨论】：

【解决方案7】：

如果您已经尝试过heroku run rake assets:precompile 并且JS 仍然无法正常工作，请尝试在预编译资产后使用heroku restart 重新启动服务器。

【讨论】：

【解决方案8】：

更新链轮对我有用：bundle update sprockets

【讨论】：