我正在运行一个开发服务器,我试图在我的rails应用程序中加载一些静态页面和文件(图像,css和javascript)进行测试。(总的来说,我是新手。Rails的安装已经在Windows 10的Linux子系统上完成了。虽然我已经将文件放在assets/images
, assets/javascripts
和assets/stylesheets
中,但当服务器运行时,我无法在测试应用程序中读取这些文件。对于我添加的几乎所有文件,我都收到以下错误:
ActionController::RoutingError (No route matches [GET] "/assets/javascripts/jquery.min.js"):
ActionController::RoutingError (No route matches [GET] "/assets/javascripts/bootstrap.min.js"):
ActionController::RoutingError (No route matches [GET] "/assets/javascripts/jqBootstrapValidation.js"):
和
ActionController::RoutingError (No route matches [GET] "/assets/images/portfolio/dreams-preview.png"):
这同样适用于一些css文件(不是全部)。
为了解决这个问题,我尝试了几个我在这里找到的想法,但我没有运气。我尝试设置:
config.serve_static_files = true
development.rb
和
rake assets:precompile
显然,这些文件在rails应用程序中是不可见的,但我仍然不明白我必须做什么才能使它们可见。你能帮我一下吗?
您需要手动将这些文件包含在application.js中,或者只需编写//= require_tree .
来加载所有的js
application.css
中增加*= require_tree .
。 最后,为了解决这个错误并将我的静态页面转移到Rails,我必须修改我的homepage.html.erb
如下:
样式表链接:
<%= stylesheet_link_tag "bootstrap.min.css" %>
也可以:
<link href="assets/bootstrap.min.css" rel="stylesheet">
Javascript包含:
<%= javascript_include_tag "bootstrap.min.js" %>
一般来说,我发现不需要预编译。我测试过,无论是否预编译,它都可以工作。
<script src="assets/bootstrap.min.js"></script>
图片标签:
<%= image_tag("portfolio/dreams-preview.png", class: "img-responsive img-centered") %>
Rails默认使用图像的正常路径(assets/images
)。不应该使用完整路径。除非图像的路径不同,否则只使用比assets/images
更深的路径,如果存在的话。
在application.html.erb
中没有做任何更改,但是在assets.rb
中需要预编译javascript和样式表:
Rails.application.config.assets.precompile += ['agency.min.js', 'agency.min.css', ...]
最终网站正常工作,尽管在执行javascript时可能会出现一些冲突。
我实际上也得到了这些错误。我的是这样的:
F, [2018-06-16T17:46:02.121588 #6963] FATAL -- :
ActionController::RoutingError (No route matches [GET] "/assets/theme/bootstrap.min.css"):
[2018-06-18T12:55:20.169664 #18951] FATAL -- :
ActionController::RoutingError (No route matches [GET] "/assets/theme/main.css"):
我从未在我的应用程序中添加任何对这些文件的引用。所以我没有立即意识到为什么这些特定的css文件被要求。在我的应用程序收到404或500错误后,它会在公共目录中加载相应的404.html或500.html。这些目录确实引用了这些css文件:
<head>
<title>PAGE NOT FOUND (404)</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="/assets/theme/bootstrap.min.css">
<link rel="stylesheet" href="/assets/theme/main.css">
</head>
所以删除这里的引用,错误就会消失。