Rails：资产不适用于 Heroku答案

【问题标题】：Rails : assets not working on HerokuRails：资产不适用于 Heroku
【发布时间】：2018-05-10 09:53:59
【问题描述】：

资产不适用于 Heroku (js/jQuery/image)

我是 ruby 新手，但我遇到了一个小问题，我创建了一个可以在本地完美运行的登录页面（图像正在显示，js 上的动画也可以正常工作）。

但在 Heroku 上，图像仍然存在，但动画不起作用。

有一些奇怪的东西，即使当我检查控制台时它正在工作，但我有很多错误：

Failed to load resource: the server responded with a status of 404 (Not Found)
font-awesome.min.css:1 Failed to load resource: the server responded with a status of 404 (Not Found)
application-18ac3fd2669832ec776c17e2e795d1fa260c46da2ba1ea9854a54227ada3a7cd.js:6 Uncaught TypeError: Cannot read property 'breakpoints' of undefined
    at application-18ac3fd2669832ec776c17e2e795d1fa260c46da2ba1ea9854a54227ada3a7cd.js:6
    at application-18ac3fd2669832ec776c17e2e795d1fa260c46da2ba1ea9854a54227ada3a7cd.js:6
jquery.min.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
pages.scss:1 Failed to load resource: the server responded with a status of 404 (Not Found)
jquery.scrollex.min.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
banner.jpg:1 Failed to load resource: the server responded with a status of 404 (Not Found)
pic02.jpg:1 Failed to load resource: the server responded with a status of 404 (Not Found)
pic01.jpg:1 Failed to load resource: the server responded with a status of 404 (Not Found)
jquery.scrolly.min.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
skel.min.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
util.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
main.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
pic03.jpg:1 Failed to load resource: the server responded with a status of 404 (Not Found)
font-awesome.min.css:1 Failed to load resource: the server responded with a status of 404 (Not Found)
pages.scss:1 Failed to load resource: the server responded with a status of 404 (Not Found)

我有一个调用脚本的 index.html.erb 页面：

<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.scrollex.min.js"></script>
<script src="assets/js/jquery.scrolly.min.js"></script>
<script src="assets/js/skel.min.js"></script>
<script src="assets/js/util.js"></script>
<!--[if lte IE 8]><script src="assets/js/ie/respond.min.js"></script><![endif]-->
<script src="assets/js/main.js"></script>

我的脚本在文件夹app/assets/javascripts/js。

非常感谢！

【问题讨论】：

标签： ruby-on-rails ruby asset-pipeline assets

【解决方案1】：

这样用是不对的：

<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.scrollex.min.js"></script>
<script src="assets/js/jquery.scrolly.min.js"></script>
<script src="assets/js/skel.min.js"></script>
<script src="assets/js/util.js"></script>
<!--[if lte IE 8]><script src="assets/js/ie/respond.min.js"></script><![endif]-->
<script src="assets/js/main.js"></script>

看看这个：The Asset Pipeline。

你应该把所有的js文件放到app/assets/javascripts而不是jquery.min.js，因为这个库默认包含rails。

我相信javascripts/application.js 应该是这样的（默认情况下）：

//= require jquery
//= require jquery_ujs
//... example 
//= require_tree .

这个//= require_tree .会自动为所有js文件映射javascripts文件夹。

像上面那样编辑后删除这行//= require rails-ujs。

而app/views/layouts/application.html.erb 应该是这样的：

<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>

更新

您应该将pages.scss 放入assets/stylesheets/ 并在assets/stylesheets/ 中创建一个文件，如custom.scss 然后custom.scss 像这样

@import "pages";

【讨论】：

我不明白为什么它在本地工作，而我的终端中的所有资产“ActionController::RoutingError (No route matches [GET] "/assets/css/pages.scss" )"
非常好的答案，Assest Pipeline 参考 +1。然而，自从 Rails 5.1 以来，jQuery 不再是默认依赖项。 weblog.rubyonrails.org/2017/4/27/Rails-5-1-final
@DedeBanell 请参阅更新部分

【解决方案2】：

您不需要在 index.html.erb 中包含脚本。

在您的 app/views/layouts/application.erb 中，应该存在以下行。

<%= javascript_include_tag "application.js", "data-turbolinks-track" => 'reload' %>

在你的 app/assets/javascripts/application.js 你应该看到一行 //= require_tree .

在您的 app/assets/javascripts 中创建任何 .js 文件并编写您的代码。它适用于所有视图，不包括任何位置。

如果您的动画不起作用，请尝试从<head> 移动以下行

<%= javascript_include_tag "application.js", "data-turbolinks-track" => true %>

到上面的结束正文标记。即</body>

【讨论】：