Rails部署至Heroku后Assets资源（JS/JQuery/图片）无法正常工作

嘿，作为Ruby新手遇到这个问题太正常了——这是Rails的**资产管道（Asset Pipeline）**在生产环境和开发环境的处理差异导致的坑！本地开发时Rails会动态编译资源，所以硬编码路径能正常访问，但部署到Heroku后，资产会被预编译并加上唯一指纹（比如你看到的application-18ac3fd266...js），原来的相对路径自然就找不到资源了。下面一步步帮你解决：

1. 把硬编码的资源引用换成Rails辅助方法 #

你现在在index.html.erb里直接写了静态路径，得换成Rails提供的资产辅助方法，这样生产环境会自动生成预编译后的正确路径：

替换JS引用 #

把所有<script>标签替换成javascript_include_tag：

<!-- Scripts -->
<%= javascript_include_tag 'js/jquery.min', 'js/jquery.scrollex.min', 'js/jquery.scrolly.min', 'js/skel.min', 'js/util' %>
<!--[if lte IE 8]><%= javascript_include_tag 'js/ie/respond.min' %><![endif]-->
<%= javascript_include_tag 'js/main' %>

注意：你的JS文件放在app/assets/javascripts/js/目录下，所以路径写js/文件名就行，不需要加.js后缀，辅助方法会自动处理。

替换CSS引用 #

如果font-awesome.min.css、pages.scss也是硬编码引用，同样换成stylesheet_link_tag：

<%= stylesheet_link_tag 'font-awesome.min', 'pages' %>

确保这些CSS文件放在app/assets/stylesheets/目录下。

替换图片引用 #

把页面里的图片（比如banner.jpg、pic01.jpg）移到app/assets/images/目录，然后用image_tag引用：

<%= image_tag 'banner.jpg' %>
<%= image_tag 'pic01.jpg' %>

2. 配置资产预编译列表 #

默认情况下，Rails只预编译application.js、application.css和图片文件，你的额外JS/CSS需要手动加入预编译列表：

打开config/initializers/assets.rb，添加以下代码：

Rails.application.config.assets.precompile += %w(
  js/jquery.min.js
  js/jquery.scrollex.min.js
  js/jquery.scrolly.min.js
  js/skel.min.js
  js/util.js
  js/main.js
  js/ie/respond.min.js
  font-awesome.min.css
  pages.scss
)

3. 本地预编译测试（可选但推荐） #

部署到Heroku前，先在本地模拟生产环境预编译资产，检查是否有错误：

RAILS_ENV=production rails assets:precompile

执行后会在public/assets/目录生成带指纹的资产文件，确认所有需要的JS/CSS/图片都被正确编译。

4. Heroku部署的小细节 #

• 如果是Rails 4及以下版本，确保Gemfile里包含rails_12factor gem（Rails 5+已整合该功能）：

  gem 'rails_12factor', group: :production
  

• 部署时Heroku会自动运行assets:precompile，如果遇到异常，可以手动触发：

  heroku run rails assets:precompile
  

完成这些步骤后重新部署到Heroku，所有404错误应该就消失了，JS动画也能正常运行啦！

内容的提问来源于stack exchange，提问作者Dede Banell