JavaScript无法在Heroku Cedar堆栈Rails应用程序上正确加载

时间:2013-01-25 01:07:48

标签: javascript ruby-on-rails heroku asset-pipeline

我遇到的问题与SO帖子所概述的基本相同:

jQuery script not loading on production (Heroku - cedar stack)

在开发环境中,我的javascript正确内置于页面中:

<link type="text/css" rel="stylesheet" media="all" href="/assets/rails_admin/imports.css?body=1">
<link type="text/css" rel="stylesheet" media="all" href="/assets/rails_admin/rails_admin.css?body=1">
<script type="text/javascript" src="/assets/jquery.js?body=1">
<script type="text/javascript" src="/assets/jquery_ujs.js?body=1">
<script type="text/javascript" src="/assets/jquery.iframe-transport.js?body=1">
<script type="text/javascript" src="/assets/jquery.remotipart.js?body=1">
<script type="text/javascript" src="/assets/jquery.ui.effect.js?body=1">
<script type="text/javascript" src="/assets/jquery.ui.core.js?body=1">
<script type="text/javascript" src="/assets/jquery.ui.widget.js?body=1">
<script type="text/javascript" src="/assets/jquery.ui.mouse.js?body=1">
<script type="text/javascript" src="/assets/jquery.ui.sortable.js?body=1">
<script type="text/javascript" src="/assets/jquery.ui.position.js?body=1">
<script type="text/javascript" src="/assets/jquery.ui.menu.js?body=1">
<script type="text/javascript" src="/assets/jquery.ui.autocomplete.js?body=1">
<script type="text/javascript" src="/assets/jquery.ui.datepicker.js?body=1">
<script type="text/javascript" src="/assets/rails_admin/jquery.ui.timepicker.js?body=1">
<script type="text/javascript" src="/assets/rails_admin/ra.datetimepicker.js?body=1">
<script type="text/javascript" src="/assets/rails_admin/jquery.colorpicker.js?body=1">
<script type="text/javascript" src="/assets/rails_admin/ra.filter-box.js?body=1">
<script type="text/javascript" src="/assets/rails_admin/ra.filtering-multiselect.js?body=1">
<script type="text/javascript" src="/assets/rails_admin/ra.filtering-select.js?body=1">
<script type="text/javascript" src="/assets/rails_admin/ra.remote-form.js?body=1">
<script type="text/javascript" src="/assets/rails_admin/jquery.pjax.js?body=1">
<script type="text/javascript" src="/assets/jquery_nested_form.js?body=1">
<script type="text/javascript" src="/assets/rails_admin/ra.nested-form-hooks.js?body=1">
<script type="text/javascript" src="/assets/bootstrap-transition.js?body=1">
<script type="text/javascript" src="/assets/bootstrap-affix.js?body=1">
<script type="text/javascript" src="/assets/bootstrap-alert.js?body=1">
<script type="text/javascript" src="/assets/bootstrap-button.js?body=1">
<script type="text/javascript" src="/assets/bootstrap-carousel.js?body=1">
<script type="text/javascript" src="/assets/bootstrap-collapse.js?body=1">
<script type="text/javascript" src="/assets/bootstrap-dropdown.js?body=1">
<script type="text/javascript" src="/assets/bootstrap-modal.js?body=1">
<script type="text/javascript" src="/assets/bootstrap-scrollspy.js?body=1">
<script type="text/javascript" src="/assets/bootstrap-tab.js?body=1">
<script type="text/javascript" src="/assets/bootstrap-tooltip.js?body=1">
<script type="text/javascript" src="/assets/bootstrap-popover.js?body=1">
<script type="text/javascript" src="/assets/bootstrap-typeahead.js?body=1">
<script type="text/javascript" src="/assets/bootstrap.js?body=1">
<script type="text/javascript" src="/assets/rails_admin/ra.widgets.js?body=1">
<script type="text/javascript" src="/assets/rails_admin/ui.js?body=1">
<script type="text/javascript" src="/assets/rails_admin/themes/default/ui.js?body=1">
<script type="text/javascript" src="/assets/rails_admin/custom/ui.js?body=1">
<script type="text/javascript" src="/assets/rails_admin/rails_admin.js?body=1">

但是在Heroku(Cedar堆栈)的生产中,它看起来像:

<html>
<head>
<meta content='text/html; charset=utf-8' http-equiv='Content-Type'>
<meta content='NONE,NOARCHIVE' name='robots'>
<meta content="authenticity_token" name="csrf-param" />
<meta content="mJAzj+IxBGxFd4vVR9EZKX9a0CL9zSugp5a13vcCOGY=" name="csrf-token" />
<link href="/assets/rails_admin/rails_admin-babb206bf505b710a7e6ec10b27d3190.css" media="all" rel="stylesheet" type="text/css" />
<script src="/assets/rails_admin/rails_admin-315877c5aae48e12a1abd274be846d08.js" type="text/javascript"></script>
</head>

根据我的研究,每个人似乎都指出预编译资产是一个解决方案,但我已经尝试了几十个解决方案,但没有一个解决了这个问题。

我尝试使用以下命令推送到Heroku之前预编译资产:

RAILS_ENV=production bundle exec rake assets:precompile

但问题仍然存在

以下是一些相关文件:

的Gemfile:

source 'https://rubygems.org'

gem 'rails', '3.2.11'

# Bundle edge Rails instead:
# gem 'rails', :git => 'git://github.com/rails/rails.git'

gem 'pg'
gem 'rails_admin'
gem 'cancan'
gem 'bootstrap-sass'
gem 'jquery-rails'
gem "devise"

group :development, :test do
   gem 'rspec-rails'
end

# Gems used only for assets and not required
# in production environments by default.
group :assets do
   gem 'sass-rails',   '~> 3.2.3'
   gem 'coffee-rails', '~> 3.2.1'
   gem 'uglifier', '>= 1.0.3'
   gem 'bootstrap-rails'
end

的application.js

// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// the compiled file.
//
// WARNING: THE FIRST BLANK LINE MARKS THE END OF WHAT'S TO BE PROCESSED, ANY BLANK LINE SHOULD
// GO AFTER THE REQUIRES BELOW.
//
//= require jquery
//= require jquery_ujs
//= require_tree .

application.rb中

require File.expand_path('../boot', __FILE__)

require 'rails/all'

if defined?(Bundler)
  # If you precompile assets before deploying to production, use this line
  Bundler.require(*Rails.groups(:assets => %w(development test)))
  # If you want your assets lazily compiled in production, use this line
  # Bundler.require(:default, :assets, Rails.env)
end

module MaterialsCalculatorApp
  class Application < Rails::Application
    # Settings in config/environments/* take precedence over those specified here.
    # Application configuration should go into files in config/initializers
    # -- all .rb files in that directory are automatically loaded.

    # Custom directories with classes and modules you want to be autoloadable.
    # config.autoload_paths += %W(#{config.root}/extras)

    # Only load the plugins named here, in the order given (default is alphabetical).
    # :all can be used as a placeholder for all plugins not explicitly named.
    # config.plugins = [ :exception_notification, :ssl_requirement, :all ]

    # Activate observers that should always be running.
    # config.active_record.observers = :cacher, :garbage_collector, :forum_observer

    # Set Time.zone default to the specified zone and make Active Record auto-convert to this zone.
    # Run "rake -D time" for a list of tasks for finding time zone names. Default is UTC.
    # config.time_zone = 'Central Time (US & Canada)'

    # The default locale is :en and all translations from config/locales/*.rb,yml are auto loaded.
    # config.i18n.load_path += Dir[Rails.root.join('my', 'locales', '*.{rb,yml}').to_s]
    # config.i18n.default_locale = :de

    # Configure the default encoding used in templates for Ruby 1.9.
    config.encoding = "utf-8"

    # Configure sensitive parameters which will be filtered from the log file.
    config.filter_parameters += [:password]

    # Enable escaping HTML in JSON.
    config.active_support.escape_html_entities_in_json = true

    # Use SQL instead of Active Record's schema dumper when creating the database.
    # This is necessary if your schema can't be completely dumped by the schema dumper,
    # like if you have constraints or database-specific column types
    # config.active_record.schema_format = :sql

    # Enforce whitelist mode for mass assignment.
    # This will create an empty whitelist of attributes available for mass-assignment for all models
    # in your app. As such, your models will need to explicitly whitelist or blacklist accessible
    # parameters by using an attr_accessible or attr_protected declaration.
    config.active_record.whitelist_attributes = true

    # Enable the asset pipeline
    config.assets.enabled = true

    # Version of your assets, change this if you want to expire all your assets
    config.assets.version = '1.0'

    config.assets.initialize_on_precompile = false
  end
end

在开发过程中一切正常,它只是部署到Heroku,我发现问题。如果有任何其他文件可能有助于调试此问题,请告诉我,我会提供。

1 个答案:

答案 0 :(得分:4)

我最初认为这是与Heroku特别相关的事情。但是,似乎我发现了这个问题。 Twitter Bootstrap似乎无法与rails_admin一起播放,我能够将以下文件添加到app/assets/javascripts/rails_admin

rails_admin.js

//=  require 'jquery'
//=  require 'jquery_ujs'
//=  require 'jquery.ui.effect'
//=  require 'jquery.ui.sortable'
//=  require 'jquery.ui.autocomplete'
//=  require 'jquery.ui.datepicker'
//=  require 'rails_admin/jquery.ui.timepicker'
//=  require 'rails_admin/ra.datetimepicker'
//=  require 'rails_admin/jquery.colorpicker'
//=  require 'rails_admin/ra.filter-box'
//=  require 'rails_admin/ra.filtering-multiselect'
//=  require 'rails_admin/ra.filtering-select'
//=  require 'rails_admin/ra.remote-form'
//=  require 'rails_admin/jquery.pjax'
//=  require 'jquery_nested_form'
//=  require 'rails_admin/ra.nested-form-hooks' 
//=  require 'twitter/bootstrap'
//=  require 'rails_admin/ra.widgets'
//=  require 'rails_admin/ui'
//=  require 'rails_admin/custom/ui'

我还将此行添加到application.rb

config.assets.precompile += ['rails_admin/rails_admin.css', 'rails_admin/rails_admin.js']

我所有的js下拉列表现在似乎都在运作。