Question

我有以下问题，我使用materialize CSS而不是Bootstrap在Rails上开发应用程序;事实上，当我需要收取一些JavaScript来查看，例如，＆＃34;下拉菜单＆＃34;或者＆＃34;选择＆＃34;，在本地版本中它可以正常工作但是当我部署到Heroku时，我需要重新加载页面才能看到这些元素。我在Chrome检查员中看到了这两个应用，以及我在＆＃34; source＆＃34;中找到的奇怪内容：

本地版

<head>
  <link href="/assets/application.css?body=1" media="screen" rel="stylesheet" />
  <script src="/assets/jquery.js?body=1"></script>
<script src="/assets/jquery_ujs.js?body=1"></script>
<script src="/assets/materialize/jquery.easing.1.3.js?body=1"></script>
<script src="/assets/materialize/velocity.min.js?body=1"></script>
<script src="/assets/materialize/hammer.min.js?body=1"></script>
<script src="/assets/materialize/jquery.hammer.js?body=1"></script>
<script src="/assets/materialize/collapsible.js?body=1"></script>
<script src="/assets/materialize/dropdown.js?body=1"></script>
<script src="/assets/materialize/leanModal.js?body=1"></script>
<script src="/assets/materialize/materialbox.js?body=1"></script>
<script src="/assets/materialize/parallax.js?body=1"></script>
<script src="/assets/materialize/tabs.js?body=1"></script>
<script src="/assets/materialize/tooltip.js?body=1"></script>
<script src="/assets/materialize/waves.js?body=1"></script>
<script src="/assets/materialize/toasts.js?body=1"></script>
<script src="/assets/materialize/sideNav.js?body=1"></script>
<script src="/assets/materialize/scrollFire.js?body=1"></script>
<script src="/assets/materialize/scrollspy.js?body=1"></script>
<script src="/assets/materialize/forms.js?body=1"></script>
<script src="/assets/materialize/slider.js?body=1"></script>
<script src="/assets/materialize/cards.js?body=1"></script>
<script src="/assets/materialize/pushpin.js?body=1"></script>
<script src="/assets/materialize/animations.js?body=1"></script>
<script src="/assets/materialize/buttons.js?body=1"></script>
<script src="/assets/materialize/transitions.js?body=1"></script>
<script src="/assets/materialize/date_picker/picker.js?body=1"></script>
<script src="/assets/materialize/date_picker/picker.date.js?body=1"></script>
<script src="/assets/materialize-sprockets.js?body=1"></script>
<script src="/assets/owl.carousel.js?body=1"></script>
<script src="/assets/index.js?body=1"></script>
<script src="/assets/jquery-ui.js?body=1"></script>
<script src="/assets/jquery.min.js?body=1"></script>
<script src="/assets/jquery.mmenu.js?body=1"></script>
<script src="/assets/materialize.js?body=1"></script>
<script src="/assets/materialize.min.js?body=1"></script>
<script src="/assets/script.js?body=1"></script>
<script src="/assets/section.js?body=1"></script>
<script src="/assets/shopping_cart.js?body=1"></script>
<script src="/assets/application.js?body=1"></script>
  <meta content="authenticity_token" name="csrf-param" />
<meta content="cmwx+6SEw1CKtoScvCUqgEP77I8PGySQvztPPo3MKgw=" name="csrf-token" />
</head>

Heroku版

<head>
  <link href="/assets/application-b804f5fbe6a002a548de7e30161c225b.css" media="screen" rel="stylesheet" />
  <script src="/assets/application-9fe0c4c49ba13eb54f93880ba7ad932e.js"></script>
  <meta content="authenticity_token" name="csrf-param" />
<meta content="j+oWzNXf5+jUhodRLG7+4vPKp9ybgieDaFCZfJCMAXo=" name="csrf-token" />
</head>

我放了一些项目文件

#application.js 
//= require jquery
//= require jquery_ujs
//= require materialize-sprockets
//= require owl.carousel
//= require_tree .

我在这里调用函数

 <script>$(document).ready(function() {
    $('select').material_select();
  });</script>
  <body>
<h3 class="center-align teal-text thin"> Publica un nuevo producto </h3> 
<%= render 'form' %>
</body>

Answer 1

要使您的生产资产与开发完全一样，请比较config/environments/development.rb和config/environments/production.rb。将开发中的资产配置行设置为等于生产中的资产配置行。

更好的选择是出于性能原因维持缩小。我建议查看源映射以在生产中进行调试。您可以在此处找到有关使用源地图的详细介绍：http://code.tutsplus.com/tutorials/javascript-debugging-using-cross-browser-source-maps--cms-24430

本地应用程序和部署到Heroku之间的差异

1 个答案: