部署到 Heroku 时样式表和图像路径损坏答案

【问题标题】：Broken stylesheet and image paths when deploying to Heroku部署到 Heroku 时样式表和图像路径损坏
【发布时间】：2013-11-29 14:07:12
【问题描述】：

我已将一个全新的 Rails 4 应用程序部署到 Heroku，但我的样式表和图像无法正常工作。对于样式表。我用：

<%= stylesheet_link_tag "screen", media: "all" %>

对于图片，我使用 CSS 编码的路径，例如：

<img class="logo small" src="/assets/logo.jpg" alt="logo">

这些路径在我的本地计算机上运行良好，但在部署中中断。我认为这是由于 Heroku Cedar 堆栈没有提供静态资产，并在 production.rb 中将此设置设置为 true：

config.serve_static_assets = false

这并没有解决它。我错过了什么？谢谢！

【问题讨论】：

【解决方案1】：

Heroku 有在 Heroku 上托管 Rails4 应用程序的具体说明。您的 Gemfile 中是否有用于生产的 rails_12factor gem？

另外，我建议切换到使用 rails helpers 来处理图像，因为它可以更轻松地处理生产中的资产管道 -

<%= image_tag 'logo', class: 'logo small'  %>

【讨论】：

我确实为“生产”组声明了“rails_12factor” gem - 它被我的 Gemfile.lock 拾取。我打算在某个时候切换到 rails helpers 来获取图像 - 但是问题似乎并非源于此（该应用程序仍然完全没有样式）。

【解决方案2】：

我已经想通了 - 这个问题是由于 git 存储库运行不佳造成的。我现在对样式表和图像都使用资产管道 - 但我必须删除本地 git 存储库和远程应用程序，并从头开始一切。这些是我采取的步骤：

1) 在 application.css 中声明所有样式表，如下所示：

 *= require_self
 *= require frameless
 *= require typography
 *= require grid
 *= require layout

（我的旧应用程序使用了一个screen.css 文件，我在其中导入了上述文件。这不适用于AP - 每个文件都必须以正确的顺序直接在application.css 清单文件中引用，以便CSS 规则以正确的优先级叠加。为确保这一点，您可能需要删除默认存在的 require_tree 指令。

2) 将所有 HTML 图像路径更改为 rails helper image_tag 标签。

3) 运行RAILS_ENV=production bundle exec rake assets:precompile 以生成包含所有预编译资产as described here 的public/assets 目录。

将所有内容检查到新的 git 存储库中（已删除新存储库），然后关注 Heroku's instructions on how to deploy a Rails 4 app。

宾果游戏！

【讨论】：