javascript - Rails 4 - 不包含 js 或图像的 heroku 生产版本

Question

我想弄清楚我在生产环境中部署到 Heroku 时出了什么问题。

我的本​​地主机文件都有效。

我的 app/assets/js 文件夹中有一个名为 application.js 的文件，其中包含:

//= require jquery
//= require bootstrap-sprockets
//= require jquery_ujs
//= require html.sortable
//= require bootstrap-slider
//= require moment
//= require bootstrap-datetimepicker
//= require pickers
//= require main
//= require npm
//= require hammer.min
//= require jquery.animate-enhanced.min
//= require jquery.countTo
//= require jquery.easing.1.3
//= require jquery.fitvids
//= require jquery.magnific-popup.min
//= require jquery.parallax-1.1.3
//= require jquery.properload
//= require jquery.shuffle.modernizr.min
//= require jquery.sudoSlider.min
//= require jquery.superslides.min
//= require masonry.pkgd.min
//= require rotaterator
//= require smoothscrolljs
//= require waypoints.min
//= require wow.min
//= require underscore
//= require gmaps/google
//= require dependent-fields
//= require chosen-jquery
//= require cocoon
//= require imagesloaded.pkgd.min
//= require isotope.pkgd.min
//= require circle-progress
//= require jquery.counterup.min
//= require jquery.pjax
//= require custom.js
//= require_tree .

在我的 app/assets/stylesheets 文件夹中。我有一个名为 application.css.scss 的文件，其中包含:

@import "bootstrap-sprockets";
@import "bootstrap";
@import 'bootstrap-datetimepicker';
@import "font-awesome-sprockets";
@import "font-awesome";
@import "bootstrap-slider";
@import "chosen";
@import "animate";
@import "magnific-popup";
@import "simple-line-icons";
@import "shortcodes";
@import "style";
@import "text";
@import "variable";


@import "addresses.scss";
@import "articles.scss";
@import "common.scss";
@import "footer.scss";
@import "forms.scss";
@import "glyphs.scss";
@import "index.scss";
@import "legal.scss";
@import "navigation.scss";
@import "pages.scss";
@import "profiles.scss";
@import "profile2.scss";
@import "video.scss";

我还有 app/assets/images 文件夹。它有几个 .jpg 和 .png 文件以及 favicon.ico

在我的 application.rb 中，我有

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

require 'rails/all'


# Require the gems listed in Gemfile, including any gems
# you've limited to :test, :development, or :production.
Bundler.require(*Rails.groups)

  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.

    # 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 = 'London'

    # 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

    # Do not swallow errors in after_commit/after_rollback callbacks.
    config.active_record.raise_in_transactional_callbacks = true

    config.assets.paths << "#{Rails}/vendor/assets/fonts"

    config.assets.precompile += %w(*.png *.jpg *.jpeg *.gif)

    config.assets.initialize_on_precompile = false

    config.secret_key_base = Figaro.env.secret_key_base

    # I18n.available_locales = [:en, :ru]

    # config.active_record.observers = :video_observer

    # config.active_record.observers = :user_observer

    config.autoload_paths += %W(#{config.root}/services)
  end
end

在我的 production.rb 中，我有

# Enable Rack::Cache to put a simple HTTP cache in front of your application
  # Add `rack-cache` to your Gemfile before enabling this.
  # For large-scale production use, consider using a caching reverse proxy like
  # NGINX, varnish or squid.
  # config.action_dispatch.rack_cache = true

  # Disable serving static files from the `/public` folder by default since
  # Apache or NGINX already handles this.
  config.serve_static_files = ENV['RAILS_SERVE_STATIC_FILES'].present?

  # Compress JavaScripts and CSS.
  config.assets.js_compressor = :uglifier
  config.assets.css_compressor = :sass

  # Do not fallback to assets pipeline if a precompiled asset is missed.
  # config.serve_static_assets = true
  # config.assets.compile = true
  config.assets.precompile =  ['*.js'] 
  # config.assets.precompile += %w(*.js *.css *.svg *.eot *.woff *.ttf *.gif *.png *.ico)


  # Asset digests allow you to set far-future HTTP expiration dates on all assets,
  # yet still be able to expire them through the digest params.
  config.assets.digest = false

  # `config.assets.precompile` and `config.assets.version` have moved to config/initializers/assets.rb

  # Specifies the header that your server uses for sending files.
  # config.action_dispatch.x_sendfile_header = 'X-Sendfile' # for Apache
  # config.action_dispatch.x_sendfile_header = 'X-Accel-Redirect' # for NGINX

  # Force all access to the app over SSL, use Strict-Transport-Security, and use secure cookies.
  # config.force_ssl = true

  # Use the lowest log level to ensure availability of diagnostic information
  # when problems arise.
  config.log_level = :debug

  # Prepend all log lines with the following tags.
  # config.log_tags = [ :subdomain, :uuid ]

  # Use a different logger for distributed setups.
  # config.logger = ActiveSupport::TaggedLogging.new(SyslogLogger.new)

  # Use a different cache store in production.
  # config.cache_store = :mem_cache_store

  # Enable serving of images, stylesheets, and JavaScripts from an asset server.
  # config.action_controller.asset_host = 'http://assets.example.com'

  # Ignore bad email addresses and do not raise email delivery errors.
  # Set this to true and configure the email server for immediate delivery to raise delivery errors.
  # config.action_mailer.raise_delivery_errors = false

  # Enable locale fallbacks for I18n (makes lookups for any locale fall back to
  # the I18n.default_locale when a translation cannot be found).
  config.i18n.fallbacks = true

  # Send deprecation notices to registered listeners.
  config.active_support.deprecation = :notify

  # Use default logging formatter so that PID and timestamp are not suppressed.
  config.log_formatter = ::Logger::Formatter.new

  # Do not dump schema after migrations.
  config.active_record.dump_schema_after_migration = false

在我的配置 initialiser/assets.rb 文件中我有:

# Be sure to restart your server when you modify this file.

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

# Add additional assets to the asset load path
# Rails.application.config.assets.paths << Emoji.images_path

# Precompile additional assets.
# application.js, application.css, and all non-JS/CSS in app/assets folder are already added.
Rails.application.config.assets.precompile += %w( search.js )
Rails.application.config.assets.precompile += %w( surveyor_all.js )
Rails.application.config.assets.precompile += %w( surveyor_all.css )
Rails.application.config.assets.precompile += %w( index.css )
Rails.application.config.assets.precompile += %w( *.jpg *.gif *.png *.ico )
Rails.application.config.assets.precompile += %w( favicon.ico )
Rails.application.config.assets.precompile += %w( application.css )

我已经多次尝试运行 rake 预编译 Assets 并运行 RAILS_ENV=production bundle exec rake assets:precompile。我什么都做不了。

在开发版本中运行良好的 javascript 在生产版本中不起作用。图像未渲染。我不知道为什么。应用程序中使用的所有 js 文件都列在 application.js 中。一些必需的文件存储在 vendor 文件夹中。同样，所有 css 文件都列在 application.css.scss 文件中，所有图像都在应用程序 Assets 图像文件夹中。

有谁知道如何部署到包含所有文件的 Heroku？

例子(有很多，不工作的东西:

1. 图片

    <div class="hero-section parallax-bg dark-layer" 
   

   data-background= "<%= image_path "cropdust.jpg"%>">

上面的图片保存在我的app assets images文件夹中。它只是呈现一个空白面板(在生产中)。

1. CSS

我有一个包含 div 选项卡和 ID 的内容面板。单击 id 时，选项卡应该移动。他们没有，面板卡在第一个选项卡上:

<div class="row">
                        <div class="col-md-12">
                            <div class="dp-tab-1">
                                <ul class="dp-tab-list row" id="myTab">
                                    <li class="col-md-3 col-xs-6 active" >
                                        <a href="#tab-content-first">

                                            <span>THE OLD WAY</span>
                                        </a>
                                    </li>
                                    <li class="col-md-3 col-xs-6">
                                        <a href="#tab-content-second">

                                            <span>direct</span>
                                        </a>
                                    </li>
                                    <li class="col-md-3 col-xs-6">
                                        <a href="#tab-content-third">



                                            <span>MYTHs</span>
                                        </a>
                                    </li>
                                    <li class="col-md-3 col-xs-6">
                                        <a href="#tab-content-fourth">

                                            <span>OUR APPROACH</span>
                                        </a>
                                    </li>
                                </ul>
                                <div class="dp-tab-content tab-content">
                                    <div class="tab-pane row fade in active" id="tab-content-first">
                                        <div class="col-md-6 text-center">

                                            <%= image_tag "oldway.jpg", :class=>"wow fadeInLeft img-responsive", :alt=>"The old fashioned way" %>

                                        </div>
                                        <div class="col-md-6">
                                            <div class="tab-inner">
                                                <h4> INEFFICIENT</h4>
                                                <p class='medium-text'>
                                                    With:
                                                    <ul class='medium-text'>
                                                        <li class='medium-text'>- grant  routinely dwarfed 
                                                    </ul>     
                                                </p>

                                                <p class='medium-text'>
                                                    It's beyond clear, that 
                                                </p>


                                                <br/>
                                                <a class='btn btn-info btn-line'>READ MORE</a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="tab-pane row fade" id="tab-content-second">
                                        <div class="col-md-8">
                                            <div class="tab-inner">

1. JS

       <span class="countTo" data-from="356" data-to="0" data-speed="3000">0</span>
   
     </div>
   

Answer 1

确保您的 production.rb 文件中的以下内容为真

config.assets.compile = true
config.assets.digest = true

我在 heroku 上遇到了类似的问题，尽管在开发中一切正常，但 jquery raty 插件的星号被打破了。

添加上述设置对我来说完成了工作。我在您发布的 config/production.rb 文件中看到它们是错误的