[英]Autodesk Forge run via Heroku won't display the Dashboard Extension
我正在学习位于learnforge.autodesk.io的 Autodesk Forge 分步教程并使用 NodeJS 选项。
我目前处于最后的“部署”部分并决定使用Heroku 。 当应用程序通过本地计算机运行时,仪表板扩展运行良好,但在通过 Heroku 运行时不显示。
尝试遵循Autodesk Forge Extensions主题,但它对我不起作用。
编辑:我通过 Heroku CLI 对 Heroku 上的实际文件进行了检查,文件和所有其他路径与本地计算机上的完全相同。 对了,我也在用免费版的Heroku,请问是这个原因吗?
Chrome 浏览器控制台显示以下错误:
我的 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 & 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">×</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 的巫师们,请听我的召唤,因为我需要帮助。
好的,让它工作。
这只是一个“区分大小写”的问题。
我的真实路径是“js/ d ashboard/”,它被称为“js/ D ashboard/”。 它必须是真实案例级别。 本地机器调试不关心这个,但服务器关心。
我已经按照 Learnforge 分步教程“一字不差”地复制了已经考虑过的代码。 我想这是我忘记的一些基本的服务器端知识。
感谢您伸出援手!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.