`

rails生产环境css无法加载问题

 
阅读更多
此文为全部转载,http://www.makaidong.com/%E5%8D%9A%E5%AE%A2%E5%9B%AD%E6%96%87/30104.shtml

rails 4.0 -- production环境配置之解决无法加载css或js
最近配置production环境,找了好几份文档,从傻逼到苦逼~~终于配置成功~~@_@!!!
首先,先加载以下几个插件:
# use uglifier as compressor for javascript assets
gem 'uglifier', '>= 1.3.0'

# use coffeescript for .js .coffee assets and views
gem 'coffee-rails', '~> 4.0.0'# use jquery  as the javascript library
gem 'jquery -rails'

gem 'execjs '

# turbolinks makes following links in your web application faster. read more: https://github.com/rails/turbolinks
gem 'turbolinks'

# use scss for stylesheets
gem 'sass-rails', '~> 4.0.0'

接着修改config/environment/production.rb,部分代码如下:
  # disable rails's static asset server (apache or nginx will already do this).
  config.serve_static_assets = true

  # compress javascripts and css.
  config.assets.compress = true
  config.assets.js _compressor = :uglifier
  config.assets.css_compressor = :sass

  # do not fallback to assets pipeline if a precompiled asset is missed.
  config.assets.compile = false

  # generate digests for assets urls.
  config.assets.digest = true

接着在config/application.rb中添加下面代码:
1     config.assets.precompile << proc.new do |path|
2       if path =~ /\.(css|js |scss|png|jpg|gif|js on)\z/
3         full_path = rails.application.assets.resolve(path).to_path
4         app_assets_path1 = rails.root.join('app', 'assets').to_path
5         app_assets_path2 = rails.root.join('public', 'assets').to_path
6         app_assets_path3 = rails.root.join('vendor', 'assets').to_path
7
8         if full_path.starts_with? app_assets_path1
9           true
10         else
11           if full_path.starts_with? app_assets_path2
12             true
13           else
14             if full_path.starts_with? app_assets_path3
15               true
16             else
17               false
18             end
19           end
20         end
21       end
22     end
如果有其他文件需要添加的,上面代码自行修改添加。
在app/assets/javascripts/application.js
//= require jquery
//= require jquery _ujs
//= require turbolinks
//= require_tree .
然后在开启服务器开发之前,在命令行输入 rake assets:precompile
rails 会帮你把 assets 里的文件依照环境设定打包压缩放在 public/assets 目錄底下,所有的文件名称后会加入 md5 的 fingerprinting 用來表示其內容供快取。
注:如果输入该命令行后发现无法加载css或js ,或者是提示说.js 文件已被加载,那么有可能是因为你的文件夹中还有别的application文件,里面的配置发生冲突。
接着开启服务器开发就可以了。。。
在配置开发过程 中,由于存放在app/assets/images中的有些图片是被引用在css中的,而当你在命令行中运行了rake assets:percompile后,你会发现图片的文件名是被加密了,所以在css中无法找到图片,从而导致界面无法显示。
尝试过将图片路径进行修改,让它读取app/assets/images中的iphone.png,但是not working
会发现开启服务器开发后,在控制台那里可以看到读取不到图片的错误提示。而在public/assets中的图片由于文件名被加密,所以很难确定
后来由于自己很懒,就把要用到的图copy到public/assets中,上面贴的代码保持不变,然后就成功了。。。@_@|||
分享到:
评论

相关推荐

    asset_hat, 在 Rails 中,快速加载CSS和 JS 你的资产被覆盖.zip

    asset_hat, 在 Rails 中,快速加载CSS和 JS 你的资产被覆盖 AssetHat快速加载CSS和 JS 。 你的资产被覆盖。当首次请求该包时,使用 Rails'默认的资源缓存,CSS和JS连接( 而不是缩小) 。 不够好为了使你的页面加载更...

    critical-path-css-rails, 在 Rails 中,只加载初始viewport所需的CSS !.zip

    critical-path-css-rails, 在 Rails 中,只加载初始viewport所需的CSS ! critical-path-css-rails 仅加载 Rails 中初始viewport所需的CSS !这个 gem 让你只需要在初始页面视图中加载所需的CSS 。 这给你 blazin'...

    关于rails 3.1 cucumber-rails 1.2.0

    Asset Pipeline允许开发者更有效地管理和优化应用程序的前端资源,如JavaScript、CSS和图片,通过合并和压缩这些文件来减少HTTP请求,从而提高页面加载速度。CoffeeScript是一种简洁、语法接近JavaScript的编程语言...

    critical-path-css-rails:仅在Rails中加载初始视口所需CSS!

    仅在Rails中加载初始视口所需CSS! 这种宝石让你只加载您需要的初始页面视图中CSS的能力。 由于没有最初的网络调用来获取您应用程序CSS,因此可以让您快速发展。 此gem假定您将异步加载其余CSS。 目前,建议的...

    rails指南 中文版

    8. **Asset Pipeline**:Rails的资产管道处理JavaScript、CSS和图像等静态资源,可以进行压缩、合并、版本控制,提升页面加载速度。 9. **ActiveJob**:Rails的后台任务处理框架,可以配合各种队列服务(如Resque、...

    Ruby-Webpacker使用Webpack在Rails中管理类似app的JavaScript模块

    Webpacker的核心是Webpack,这是一个流行的前端模块打包器,能够处理JavaScript、CSS、图片等各种静态资源,将它们转换、压缩并优化为生产环境下的单一或多个可加载文件。 **Webpacker的安装与配置** 1. 在Rails...

    rails4.0.0

    为了解决安全问题,Rails 4引入了Strong Parameters,强制开发者明确指定哪些参数可以被控制器的action使用。这有助于防止意外的未授权数据注入。 7. ** turbolinks** Rails 4默认包含了Turbolinks,这是一个...

    Rails 3 in Action

    - **Asset Pipeline**:Rails 3.1引入了Asset Pipeline,将CSS、JavaScript、图片等静态资源管理整合到一个统一的流程中,提高了页面加载速度。 - **CoffeeScript**:默认使用CoffeeScript作为JavaScript的预...

    Rails进行敏捷Web开发(所有版本的源码rails3.0-4.0)

    2. Rails 3.1: 这个版本引入了Asset Pipeline,它管理应用程序的CSS、JavaScript和其他静态资源,提高了加载速度并支持压缩和合并。另外,它还引入了CoffeeScript和Sass作为默认的JavaScript和CSS预处理器,提升了...

    ruby on rails最新版

    4. Asset Pipeline:管理应用的静态资源,如JavaScript、CSS和图片,支持压缩和合并以提高加载速度。 5. Rails发电机:自动化代码生成,帮助快速构建新模型、控制器、迁移等。 6. RESTful设计:鼓励使用HTTP动词来...

    tailwindcss-rails

    Tailwind CSS for Rails 是实用程序优先CSS框架,其中包含诸如flex,pt-4,text-center和rotate-90之类的类,可以直接在您的标记中进行组合以构建任何设计。 Tailwind CSS for Rails可与资产管道和Webpacker一起使用...

    ruby on rails环境搭建学习笔记;passenger+nginx环境配置

    ### Ruby on Rails 环境搭建与 Passenger+Nginx 配置详解 #### 一、Ruby on Rails 开发环境搭建 在进行 Ruby on Rails 的开发之前,首先需要完成一系列的基础软件安装工作,包括但不限于 Ruby 语言环境、Rails ...

    Rails入门教程一(翻译)

    ### Rails 入门教程知识点详解 #### 一、Rails与Ruby简介 - **Rails**:全称为Ruby on Rails,简称RoR或Rails,是一种用于快速开发Web应用的框架,基于Ruby语言,由David Heinemeier Hansson创建。Rails强调代码的...

    ruby on rails(开发文档)

    11. **Asset Pipeline**:Rails的资产管道处理CSS、JavaScript和图像等静态资源,支持预处理和组合,提高加载性能。 12. **Webpacker**:在较新的Rails版本中,Webpacker替代Sprockets,用于集成现代前端开发工具,...

    Agile Web Development with Rails 4th edition(敏捷Web开发与Rails:程序指南 第四版)

    9. **Deployment**: 最后,书中还会介绍如何将开发完成的应用部署到生产环境,包括使用Capistrano进行自动化部署、配置服务器环境以及使用Nginx和Unicorn等服务器软件。 通过阅读《敏捷Web开发与Rails:程序指南 第...

    ruby on rails开发

    Rails默认使用SQLite数据库,但在生产环境中通常使用MySQL或PostgreSQL。首先,安装所需的数据库驱动,如`gem install mysql2`或`gem install pg`。然后,在`config/database.yml`文件中配置你的数据库连接信息。 ...

    从 Assets Pipeline 到 Webpack,Rails 6 的新前端方案们 - 过纯中1

    然而,随着ES6、React等现代前端技术的普及,Assets Pipeline面临一些挑战,比如不支持ES6语法、性能问题以及无法有效处理复杂的依赖关系。这些促使开发者寻找更强大的替代方案,Webpack应运而生。 Webpack是一个...

    Ruby on Rails入门经典-例子

    9. **Asset Pipeline**:Rails的资产管道允许你管理和优化应用中的CSS、JavaScript和图片资源,通过concatenation和minification提升页面加载速度。 10. **Action Cable**:Rails 5引入的特性,实现了Websocket功能...

Global site tag (gtag.js) - Google Analytics