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

【问题标题】：can't understand why my js file is not found on client console无法理解为什么在客户端控制台上找不到我的 js 文件
【发布时间】：2020-12-10 03:43:33
【问题描述】：

这可能是一个新手问题，请不要吝啬：D

我正在尝试将 js 文件添加到 html 页面，但无法正确加载。这似乎是一个路径相关的问题。

在我链接文件的 HTML 页面中

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

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

调试控制台的屏幕截图

调试工具的源选项卡截图

在第二张图片中，我看不到 VSCode 上的所有文件夹。这是因为那些文件是服务器端的吧？如果是这样，我该如何解决这个问题？：/

这是VSCode中的文件夹结构

提前致谢。

【问题讨论】：

您的本地文件夹结构是什么？ index.html 在哪里？
您使用的是什么网络服务器？应该从哪个绝对 URL 共享 JS？你做了什么来确保这一点？
很抱歉忘记在VSCode上分享文件夹结构，请查看编辑后的帖子
VSCode结构中的css和img文件夹在哪里？看起来这些文件夹没有映射到 Web 根目录。
那些在公共文件夹中，我已经设置了公共路径并且它们工作正常。现在我想我将服务器端与客户端链接混淆了。我需要学习如何在客户端链接 js 服务器端文件。希望我的陈述有意义。

【解决方案1】：

src属性的值需要是JS文件的URL。

如果使用相对 URL，它需要相对于 HTML 文档的 URL。

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

首先你需要给 JS 文件一个 URL。您还没有显示您为您的网络服务器编写的源代码，但可以合理地假设您已使用 Express.js static 模块使 public 目录的内容可访问。

src 目录不在 public 内，因此它不可访问。它似乎也是一个包含您的服务器端源代码的目录，因此它不适合存放您的客户端 JS。

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

（如果您正在编写同构 JS，那么您可以创建一个新目录，可能称为 shared，并使用 static 公开它。

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

【讨论】：

你说得对，我使用 express 作为公共路径 const publicPath = path.join(__dirname, "../public") const viewsPath = path.join(__dirname, ".. /views") app.use(express.static(publicPath)) 我将尝试将文件移动到公用文件夹中，然后再次链接文件。感谢您的回答！我认为我需要学习更多XD
还有一件事，如果我将 js 文件移动到 public 文件夹，我不能使用 require 来加载 mapbox npm 模块......你也可以给我一个提示吗？谢谢
@aitenlabs — 倒数第二段涵盖了这一点。

【解决方案2】：

好的，我深入研究了这个问题，所以基本上，我在客户端和服务器端之间感到困惑。我查看了 mapbox api 文档并立即单击了 npm 快速指南，但这仅适用于有限的情况，当您需要在服务器上渲染地图时。我只需要关注 mapbox 服务的 web js api。

所以感谢cmets，我会尽量少见多识多！ :)

【讨论】：