通过 Heroku 的 Autodesk Forge 运行不会显示仪表板扩展

Question

我正在按照 learnforge.autodesk.io 上的 Autodesk Forge 分步教程进行操作并使用 NodeJS 选项。

我目前处于最后的“部署”部分并决定使用 Heroku。当应用程序通过本地计算机运行时，仪表板扩展工作得很好，但当通过 Heroku 运行时不显示。

尝试关注主题，但它对我不起作用。

编辑： 我通过 Heroku CLI 对 Heroku 上的实际文件进行了检查，文件和所有其他路径与本地机器上的完全相同。对了，我也在用免费版的Heroku，难道是这个原因？

Chrome 浏览器控制台显示以下错误：

GET https://myApp.herokuapp.com/js/Dashboard/Dashboard.js net::ERR_ABORTED 404（未找到） myApp.herokuapp.com/:30
GET https://myApp.herokuapp.com/js/Dashboard/DashboardPanel.js net::ERR_ABORTED 404（未找到） myApp.herokuapp.com/:32
GET https://myApp.herokuapp.com/js/Dashboard/PanelPieChart.js net::ERR_ABORTED 404（未找到） myApp.herokuapp.com/:31
GET https://myApp.herokuapp.com/js/Dashboard/PanelBarChart.js net::ERR_ABORTED 404（未找到） myApp.herokuapp.com/:29

我的index.html是：

<!DOCTYPE html>
<html>
  <head>
    <title>View Models - Autodesk Forge</title>
    <meta charset="utf-8" />
    <link
      rel="shortcut icon"
      href="https://github.com/Autodesk-Forge/learn.forge.viewmodels/raw/master/img/favicon.ico"
    />
    <!-- Common packages: jQuery, Bootstrap, jsTree -->
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jstree/3.3.7/jstree.min.js"></script>
    <link
      rel="stylesheet"
      href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css"
    />
    <link
      rel="stylesheet"
      href="//cdnjs.cloudflare.com/ajax/libs/jstree/3.3.7/themes/default/style.min.css"
    />
    <!--Chart JS  packages-->
    <script src="//cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
    <link
      rel="stylesheet"
      href="//cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.css"
    />
    <!-- Autodesk Forge Viewer files -->
    <link
      rel="stylesheet"
      href="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/style.min.css"
      type="text/css"
    />
    <script src="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/viewer3D.min.js"></script>
    <!-- this project files -->
    <link href="css/main.css" rel="stylesheet" />
    <script src="js/ForgeTree.js"></script>
    <script src="js/ForgeViewer.js"></script>
    <!-- Autodesk Forge Viewer HandleSelectionExtension -->
    <script src="js/HandleSelectionExtension.js"></script>
    <!-- Autodesk Forge Viewer Dashboard Extension -->
    <script src="js/Dashboard/Dashboard.js"></script>
    <script src="js/Dashboard/DashboardPanel.js"></script>
    <script src="js/Dashboard/PanelBarChart.js"></script>
    <script src="js/Dashboard/PanelPieChart.js"></script>
  </head>
  <body>
    <!-- Fixed navbar by Bootstrap: https://getbootstrap.com/examples/navbar-fixed-top/ -->
    <nav class="navbar navbar-default navbar-fixed-top">
      <div class="container-fluid">
        <ul class="nav navbar-nav left">
          <li>
            <a href="http://developer.autodesk.com" target="_blank">
              <img
                alt="Autodesk Forge"
                src="//developer.static.autodesk.com/images/logo_forge-2-line.png"
                height="20"
              />
            </a>
          </li>
        </ul>
      </div>
    </nav>
    <!-- End of navbar -->
    <div class="container-fluid fill">
      <div class="row fill">
        <div class="col-sm-4 fill">
          <div class="panel panel-default fill">
            <div class="panel-heading" data-toggle="tooltip">
              Buckets &amp; Objects
              <span
                id="refreshBuckets"
                class="glyphicon glyphicon-refresh"
                style="cursor: pointer"
              ></span>
              <button
                class="btn btn-xs btn-info"
                style="float: right"
                id="showFormCreateBucket"
                data-toggle="modal"
                data-target="#createBucketModal"
              >
                <span class="glyphicon glyphicon-folder-close"></span> New
                bucket
              </button>
            </div>
            <div id="appBuckets">tree here</div>
          </div>
        </div>
        <div class="col-sm-8 fill">
          <div id="forgeViewer"></div>
        </div>
      </div>
    </div>
    <form id="uploadFile" method="post" enctype="multipart/form-data">
      <input
        id="hiddenUploadField"
        type="file"
        name="theFile"
        style="visibility: hidden"
      />
    </form>
    <!-- Modal Create Bucket -->
    <div
      class="modal fade"
      id="createBucketModal"
      tabindex="-1"
      role="dialog"
      aria-labelledby="myModalLabel"
    >
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button
              type="button"
              class="close"
              data-dismiss="modal"
              aria-label="Cancel"
            >
              <span aria-hidden="true">&times;</span>
            </button>
            <h4 class="modal-title" id="myModalLabel">Create new bucket</h4>
          </div>
          <div class="modal-body">
            <input type="text" id="newBucketKey" class="form-control" /> For
            demonstration purposes, objects (files) are NOT automatically
            translated. After you upload, right click on the object and select
            "Translate". Bucket keys must be of the form [-_.a-z0-9]{3,128}
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">
              Cancel
            </button>
            <button type="button" class="btn btn-primary" id="createNewBucket">
              Go ahead, create the bucket
            </button>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

哦，codemos的精灵们，请听我的召唤，我需要帮助。

Answer 1

好的，开始工作了。

这只是一个“区分大小写”的问题。

我的真实路径是“js/dashboard/”，它被引用为“js/Dashboard/”。它必须是真实案例级别。本地机器调试不关心这个，但是服务器关心。

我按照 Learnforge 的分步教程“一字不漏”地复制了已经考虑好的代码。我想这是我忘记的一些基本的服务器端知识。

感谢您伸出援手！

通过 Heroku 的 Autodesk Forge 运行不会显示仪表板扩展

Autodesk Forge run via Heroku won't display the Dashboard Extension

html

javascript

heroku

node.js

autodesk-forge

通过 Heroku 的 Autodesk Forge 运行 不会显示仪表板扩展

Autodesk Forge run via Heroku won't display the Dashboard Extension

html

javascript

heroku

node.js

autodesk-forge

通过 Heroku 的 Autodesk Forge 运行不会显示仪表板扩展