无法理解为什么在客户端控制台上找不到我的js文件

问题描述

这可能是一个新手问题,请不要刻薄:D

我正在尝试将js文件添加到html页面,但是无法正确加载它。这似乎是与路径有关的问题。

在HTML页面中,我将文件链接

<script src="../src/utils/mapBox.js"></script>

然后在我的js文件中,我只是放置一个console.log来查看文件是否正确加载,但是不是:/ 我尝试了一切,但没有任何改变。

调试控制台的屏幕截图

screenshot of the debug console

调试工具的“源”标签的屏幕截图

screenshot of the source tab of the debuggin tool

在第二张图像上,我看不到我在VSCode上拥有的所有文件夹。是因为那些文件是服务器端的吗?如果可以,我该如何解决? :/

这是VSCode中的文件夹结构

this is the folder structure in VSCode

谢谢。

解决方法

src属性的值必须是JS文件的URL。

如果使用相对URL,则它必须相对于HTML文档的URL。

这与用于生成HTML的EJS模板和本地文件系统上的JS文件之间的路径相同。


首先,您需要为JS文件提供一个URL。您尚未显示为Websever编写的源代码,但是说您已经使用Express.js static模块制作了public的内容似乎是一个合理的假设。目录可访问。

src目录不在public内,因此不可访问。它似乎也是一个包含服务器端源代码的目录,因此它不是保留客户端JS的合适位置。

将客户端JS文件移动到public目录内的目录

(如果您正在编写同构JS,则可以创建一个新目录,也许叫做shared,并使用static公开它)。

完成后,您可以计算出JS文件的URL。

,

好吧,我深入研究了这个问题,所以基本上,我在客户端和服务器端之间感到困惑。我查看了mapbox api文档,然后立即单击了npm快速指南,但这仅在少数情况下需要在服务器上渲染地图时使用。 我需要遵循的只是mapbox服务的Web js API。

因此,感谢您的评论,我将尽量减少菜鸟,多做研究! :)