为什么<script> src 中的路径以单斜杠开头会出错？

Question

我有这个项目结构：

/root
  /static
    script.js
  page.html

这段代码：

<html>
    <head>
        <script src="/static/script.js"></script>
    </head>
    <body>
        ...
    </body>
</html>

结果：

Loading failed for the <script> with source “file:///static/script.js”.

这是为什么？我希望它在当前目录中搜索 static 文件夹（即 root）。

Answer 1

如果您的根文件夹中有任何目录，并且您的 js 文件位于该目录中，那么您必须仅提及路径，然后是文件夹名称，然后是文件名称，例如：

folder-name/filename.js

因为在网络浏览器中不需要在文件路径的开头添加正斜杠浏览器自行

Answer 2

这个错误是因为你的系统根目录下没有这个文件

这可以通过提供您的 /root 文件夹并通过该服务器访问 page.html 轻松解决。

您可以找到静态文件服务器列表 Here。

与 Node.js 一起 http-server。

在您的“/root”目录中打开终端并运行执行以下命令：

npm install -g http-server http-server -p 8000

然后您可以在 http://localhost:8000/page.html

访问您的 page.html 文件

Answer 3

在这种特殊情况下会产生错误，因为我刚刚在我机器上的浏览器中打开了 page.html（即我没有通过服务器提供它），因此 / 被解释为本地机器的 root。如果我服务过项目，那么/会被解释为项目的root，不会有错误。

更详细一点explanation/illustration。
鉴于此结构：

/root
  /static
    script.js
  page.html

以下是不同路径（在 page.html 中）将引用的内容：

/ — 根目录，它可能表示/root，但也可能表示当前环境的根（见本文开头的解释）答案）
./ — 当前（page.html 所在的目录），在这种情况下恰好是 /root
- 值得一提的是 ./ can be omitted 在引用当前目录中的某些文件时；所以 ./static/script.js 等同于 static/script.js

我从以下来源获得了此答案所需的理解：

Why path in <script> src, starting with single slash results in error?