Question

我在我的localhost上正确设置了我的rails应用程序页面，但当我将其推送到Heroku时，一切都会出错（使用相同的代码，据我所知）。

以下是localhost上显示的内容：

这是Heroku上发生的事情：

以下是相关网页的html / erb代码：

<div style="height: 80px"></div>

<div class="text-center">
  <h1 style="font-size: 10vh">Gift Helper</h1>
  <p>Select the age group for which you are being forced to shop.</p>
</div>

<div style="height: 50px" class="hidden-xs"></div>


<div class="text-center frame">
  <%= image_tag 'speedometer.jpg', style: "width: 100%; max-width: 700px", class: "vertical-align-in-div", alt: "Speedometer of Gifting.  Ooooh.  Aaaaah." %>
</div>

<div class="text-center frame" style="margin-top: -465px">
  <%= image_tag 'needle.png', id: "needle", style: "width: 100%; max-width: 290px", class: "vertical-align-in-div", alt: "The Needle of Wisdom." %>
</div>

<div class="frame" style="margin-top: -450px; width: 80%; margin-left: 10%">
  <%= link_to gifts_babies_path, id: "kids" do %>
    <div id="kids" class="stacking-boxes"></div>
  <% end %>
  <%= link_to gifts_kids_path do %>
    <div id="teens" class="stacking-boxes"></div>
  <% end %>
  <%= link_to gifts_teens_path do %>
    <div id="babies" class="stacking-boxes"></div>
  <% end %>
  <%= link_to gifts_adults_path do %>
    <div id="adults" class="stacking-boxes"></div>
  <% end %>
</div>

<script>
  $('#babies').hover(
      function(){ $('#needle').addClass('animation-babies') },
      function(){ $('#needle').removeClass('animation-babies') }
  );
  $('#kids').hover(
      function(){ $('#needle').addClass('animation-kids') },
      function(){ $('#needle').removeClass('animation-kids') }
  );
  $('#teens').hover(
      function(){ $('#needle').addClass('animation-teens') },
      function(){ $('#needle').removeClass('animation-teens') }
  );
  $('#adults').hover(
      function(){ $('#needle').addClass('animation-adults') },
      function(){ $('#needle').removeClass('animation-adults') }
  );
</script>

这是我的layout.html.erb代码。我认为这是相关的，因为它是在Heroku版本上被笨拙地拉起来的（其中包括）：

<!DOCTYPE html>
<html>
<head>
  <title>Manly Art of BBQ</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
  <%= csrf_meta_tags %>
  <%= favicon_link_tag %>
  <link href='https://fonts.googleapis.com/css?family=Heebo:400,900,100,700|Covered+By+Your+Grace|Josefin+Slab' rel='stylesheet' type='text/css'>
  <%= javascript_include_tag 'Ckeditor.cdn_url' %>
</head>
<body>

<div id="custom-bootstrap-menu" class="navbar navbar-default " role="navigation">
  <div class="container-fluid">
    <div class="navbar-header"><a class="navbar-brand" href="/"><%= image_tag 'LogoTextWhite.png', style: "height: 50px; margin-top: -15px" %></a>
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-menubuilder"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
    </div>
    <div class="collapse navbar-collapse navbar-menubuilder">
      <ul class="nav navbar-nav navbar-right">
        <li><%= link_to 'Man Rules', rules_path %></li>
        <li><%= link_to 'BBQ', home_bbq_path %></li>
        <li><%= link_to 'Jokes', home_jokes_path %></li>
        <li><%= link_to 'Lifehacks', home_lifehacks_path %></li>
        <% if current_user %>
          <li><%= link_to user_path(current_user) do %>
            My Mancard <span style="background-color: red; padding-left: 5px; padding-right: 5px; border-radius: 7px"><%= current_user.manpoints %></span>
          <% end %></li>
        <% else %>
          <li><%= link_to 'Log In', new_user_session_path %></li>
        <% end %>
      </ul>
    </div> <!-- collapse -->
  </div> <!-- container-fluid -->
</div> <!-- custom-bootstrap-menu -->

<%= yield %>

<footer>
  <div class="row" style="height: 320px">
    <div class="col-sm-4 text-center">
      <%= image_tag 'Logo.png', style: "margin-top: 40px !important; width: 225px; margin: 10px;" %>
    </div> <!-- logo column -->

    <div class="col-sm-4">
      <div class="hidden-xs" style="height: 60px"></div>
      <h2 class="text-center comment" style="margin-top: 15px; margin-left: 50px; margin-right: 50px; margin-bottom: 40px; padding-top: 20px; padding-bottom: 20px; border-top: thick solid red; border-bottom: thick solid red !important">Helping Men Be Men</h2>
    </div> <!-- men be men column -->

    <div class="col-sm-4" style="height: 320px; position: relative">
      <%= image_tag "remote-control-menu.png", style: "position: absolute; bottom: 0; right: 0", class: "hidden-xs", usemap: "#image-map", alt: "Remote control menu.  Yes, you get to hold it." %>
      <%= image_tag "remote-control-menu.png", style: "position: absolute; display: block; bottom: 0; left: 0; right: 0; margin: auto", class: "visible-xs", usemap: "#image-map", alt: "Remote control menu.  Yes, you get to hold it." %>
    </div> <!-- remote column -->

    <map name="image-map">
      <% if current_user %>
        <area target="" alt="Sign Out" title="Sign Out" href="<%= url_for destroy_user_session_path %>" coords="177,85,121,54" shape="rect">
        <area target="" alt="My Mancard" title="My Mancard" href="<%= url_for user_path(current_user) %>" coords="64,148,24" shape="circle">
      <% else %>
        <area target="" alt="Sign In" title="Sign In" href="<%= url_for new_user_session_path %>" coords="121,51,177,87" shape="rect">
        <area target="" alt="My Mancard" title="My Mancard" href="<%= url_for new_user_session_path %>" coords="64,148,24" shape="circle">
      <% end %>
        <area target="" alt="BBQ" title="BBQ" href="<%= url_for home_bbq_path %>" coords="148,143,26" shape="circle">
        <area target="" alt="Man Rules" title="Man Rules" href="<%= url_for rules_path %>" coords="234,144,27" shape="circle">
        <area target="" alt="Lifehacks" title="Lifehacks" href="<%= url_for home_lifehacks_path %>" coords="66,230,26" shape="circle">
        <area target="" alt="Jokes" title="Jokes" href="<%= url_for home_jokes_path %>" coords="148,223,27" shape="circle">
        <area target="" alt="Man Gear" title="Man Gear" href="#" coords="235,228,26" shape="circle">
    </map>
  </div> <!-- footer row -->
</footer>
</body>
</html>

最后，这是相关的SCSS：

.frame {
    height: 450px; /*can be anything*/
    width: 80%;
    margin-left: 10%;
    position: relative;
}

.vertical-align-in-div {
    max-height: 100%;
    max-width: 100%;
    width: auto;
    height: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.speedometer-label {
  position: absolute;
  z-index: 100;
  color: red;
  font-family: $font-writing;
  font-weight: bolder;
  font-size: 7vh;
}

.stacking-boxes {
  height: 175px;
  z-index: 100;
  position: relative;
  width: 49% !important;
  display: inline-block;
}

有谁可以看到错误在哪里？我无法找出任何会使Heroku上的答案与我localhost上的答案不同的答案。

Answer 1

我最后写信给Heroku的服务台，得到了以下回复：

在最新的构建日志中，我注意到以下行：

检测到清单文件，假设资产是本地编译的   文档   here   你可以看到这意味着什么的解释：

如果您的应用中检测到public/assets/manifest.yml，Heroku会   假设您自己处理资产编译，而不是   尝试编译您的资产。 Rails 4使用一个名为的文件   而是public/assets/manifest-<md5 hash>.json。在这两个版本上你   可以通过在本地运行$ rake assets:precompile来生成此文件   并将结果文件检入Git。

这意味着如果您在本地运行rake assets:precompile，即使只是   一次，然后检查您将需要的清单文件   运行资产：预先编译并在每次之前将结果检查到git中   部署。虽然我们的一些客户喜欢这样做以加快他们的速度   部署，这是一个非常微妙的变化，可以吸引人们。

我建议您删除public/assets/manifest.yml文件   git repo并重新部署应用程序，以便完成资产编译   Heroku再次自动。

当我运行rake assets:precompile然后将我的应用程序重新推送到Heroku时，它解决了问题。

Heroku与Localhost不同

1 个答案: