文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >涡轮增压:负载事件在本地机器上工作，而不是在Heroku上。

问涡轮增压:负载事件在本地机器上工作，而不是在Heroku上。
EN

Stack Overflow用户
提问于 2020-07-30 00:13:22
回答 1查看 444关注 0票数 1

我在Rails 6中使用Webpacker。turbolinks:load事件在本地正常工作，但部署到Heroku时却不能正常工作。我通过将一个'ready.js‘文件导入到我的应用程序文件夹中来使用标准的jquery ready.js。在事件处理程序中添加控制台日志在我的计算机上工作，但在部署的应用程序上不起作用。

我将代码粘贴到我的application.js中，文件放在packs文件夹中。application.html.erb形成布局文件夹和ready.js文件。我一点也不知道为什么这不管用。我已经搞了一个星期了，但没有成功。我已经尝试过在application.js文件中只使用turbolinks:load事件侦听器。我还试着做了一个简单的console.log，没有其他代码，以确保没有其他任何可能是制动的代码。即使是最简单的情况也不起作用。我还从位于cloudflare后面的站点上清除了缓存，并从Heroku清除了构建缓存。

我真的很感谢你的帮助。我接下来要做的就是，如果我一直有问题的话，不要使用涡轮码，这不是我想要做的事情。

aplication.html.erb:

代码语言：javascript
复制
<!DOCTYPE html>
<html lang="en-US" prefix="og: http://ogp.me/ns#">
  <head>
    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-160236437-1"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());

      gtag('config', 'UA-160236437-1');
    </script>

    <%if content_for?(:title)%>
      <title>ᐈ <%=  yield(:title)  %></title>
      <%else%>
      <title> Home On Call | Quality Local Contractors</title>
    <%end%>
    <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload', :defer => "defer" %>
    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= "<link rel='canonical' href='#{yield(:canonical)}'/>".html_safe if content_for?(:canonical)%>
    <meta name="description" content="<%=yield(:meta_description)%>"/>
    <meta name="robots" content="<%=yield(:robots)%>"/>
    <meta property="og:title" content="<%=yield(:og_title)%>"/>
    <meta property="og:description" content="<%=yield(:og_description)%>"/>
    <meta property='og:image' content="<%=yield(:og_image)%>"/>
    <meta property="og:url" content="<%=request.url%>"/>
    <meta property="og:site_name" content="Home On Call" />
    <meta property="og:type" content="business.business"/>
    <meta property="business:contact_data:locality" content="<%=yield(:locality_town)%>"/>
    <meta property="business:contact_data:region" content="<%=yield(:locality_state)%>"/>
    <%# <meta property="business:contact_data:postal_code" content="07604"/> %>
    <meta property="business:contact_data:country_name" content="USA"/>
    <meta property="business:contact_data:website" content="https://www.homeoncall.com/"/>
    <meta name="twitter:card" content="summary" />
    <meta name="twitter:title" content="<%=yield(:title)%>"/>
    <meta name="twitter:description" content="<%=yield(:meta_description)%>" />

    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<%= favicon_link_tag 'favicon/favicon.ico' %>
<%= favicon_link_tag "favicon/apple-touch-icon.png", rel: 'apple-touch-icon', type: 'image/png' %>
<%= favicon_link_tag "favicon/android-chrome-192x192.png", rel: 'android-chrome-icon', type: 'image/png', sizes: "192x192" %>
<%= favicon_link_tag "favicon/android-chrome-512x512.png", rel: 'android-chrome-icon', type: 'image/png', sizes: "512x512" %>

<script type="application/ld+json">
{ "@context" : "http://schema.org",
  "@type" : "Organization",
  "name" : "HomeOnCall",
  "alternateName" : "Home On Call",
  "url" : "https://www.homeoncall.com/",
  "contactPoint": [
    { "@type": "ContactPoint",
      "telephone": "+1-201-675-6069",
      "contactType": "Customer Service"},
      {"@type": "ContactPoint",
      "email": "info@homeoncall.com",
      "contactType": "Customer Service"}],
  "sameAs" : [ "https://www.facebook.com/HomeOnCall"]
}
</script>
  </head>

  <body id="page-top">
    <%= render "layouts/nav"%>
      <%= render "layouts/flash"%>
      <%= render "layouts/header"%>
      <%= yield %>
      <%= render "layouts/footer"%>
      <%= render "layouts/admin"%>

    <link href="https://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet" > 
    <link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet" >

  </body>
</html>

application.js:

代码语言：javascript
复制
// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")

import 'bootstrap'
import './src/application.scss'
import './ready'
import fontawesome from './fontawesome'

fontawesome()

// Uncomment to copy all static images under ../images to the output folder and reference
// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
// or the `imagePath` JavaScript helper below.
//
// const images = require.context('../images', true)
// const imagePath = (name) => images(name, true)

ready.js

代码语言：javascript
复制
import greyscale from './greyscale';
import easing from './easing';

console.log("OUTSIDE DOCUMENT READY")
$(document).on('ready turbolinks:load', function () {
 console.log("INSIDE DOCUMENT READY")
  greyscale();
  easing();

  // Multi Step Lead Form.

  $("#next-1").click(function (e) {
    e.preventDefault();
    $("#second").show();
    $("#first").hide();
    $("#progressBar").css("width", "40%");
    $("#progressText").text("Step - 2");
  });

  $("#next-2").click(function (e) {
    e.preventDefault();
    $("#third").show();
    $("#second").hide();
    $("#progressBar").css("width", "60%");
    $("#progressText").text("Step - 3");
  });

  $("#next-3").click(function (e) {
    e.preventDefault();
    $("#fourth").show();
    $("#third").hide();
    $("#progressBar").css("width", "80%");
    $("#progressText").text("Step - 4");
  });

  $("#next-4").click(function (e) {
    e.preventDefault();
    $("#fifth").show();
    $("#fourth").hide();
    $("#progressBar").css("width", "100%");
    $("#progressText").text("Step - 5");
  });

  $("#prev-2").click(function (e) {
    e.preventDefault();
    $("#second").hide();
    $("#first").show();
    $("#progressBar").css("width", "20%");
    $("#progressText").text("Step - 1");
  })

  $("#prev-3").click(function (e) {
    e.preventDefault();
    $("#third").hide();
    $("#second").show();
    $("#progressBar").css("width", "40%");
    $("#progressText").text("Step - 2");
  })

  $("#prev-4").click(function (e) {
    e.preventDefault();
    $("#fourth").hide();
    $("#third").show();
    $("#progressBar").css("width", "60%");
    $("#progressText").text("Step - 3");
  });

  $("#prev-5").click(function (e) {
    e.preventDefault();
    $("#fifth").hide();
    $("#fourth").show();
    $("#progressBar").css("width", "80%");
    $("#progressText").text("Step - 4");
  });

  // Modal toggle
  $('#myModal').modal();

  // Show characters left for meta description. 
  $('#meta-word-text').keyup(function(e){
    var numWords = $.trim($("#meta-word-text").val()).split("").length;
    $('#meta-word-label').text(`Characters left ${120-numWords}`)
  })

  // FAQ Collapse
  $(".collapsible-item").click(function(e){
    $(e.target).siblings().toggle()
    $(this).toggleClass("active")
  })
});
turbolinks-5
jquery
ruby-on-rails
heroku
webpacker
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-07-31 00:57:06

所以这就是所谓的触觉：

每当我点击一个链接时，

  • 就会启动我的登录输出put "INSIDE DOCUMENT READY“。当一个链接不应该点击时，
  • 会闪烁并重新加载。

查看网络选项卡时，应用程序包由Rocket异步加载(一个Cloudflare工具，用于加速JS)。

当点击一个链接时，turbolinks进行xhr调用，在火箭装载器启动之前，它工作了一小会。将火箭加载程序脚本从站点底部移除某种程度上是修复了它，尽管应用程序包当时没有正确地加载。

问题在于Cloudflare的火箭装载机和Turbolinks。我禁用了Cloudflare仪表板中的火箭加载器，遵循这个链接(https://docs.deadlinefunnel.com/en/articles/4160226-how-to-disable-cloudflare-rocket-loader)，在世界上一切都很好。

我的朋友Steffan H大喊了一声，因为他找到了这个问题的根源。

学到的教训。不要去点击你在Cloudflare上看到的每一个按钮，承诺在不彻底测试首先发生什么的情况下加速您的站点。

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/63164315

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档