为什么我的网络应用程序无法加载此脚本？

Question

使用 PhpStorm，我在浏览器中运行 index.html (Chrome)。它找到引用的 CSS 文件，但在尝试查找 main.js 时抛出 404 错误。该文件是由 gulp 生成的，它就在那里。文件权限似乎也正确（664）。知道发生了什么吗？

我也在 Chrome 中直接将 URL 键入到 index.html 并且有同样的问题所以它不是 PhpStorm 的网络服务器。 CSS 正在加载，因为我可以看到我在 body.

中编写的类似 bootstrap 的导航栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" href="assets/img/favicon.ico">
    <title>Mobile Web App</title>
    <style type="text/css">
        body {
            padding-top: 70px;
        }
    </style>
    <link rel="stylesheet" href="assets/libs/bootswatch-dist/css/bootstrap.min.css">
    <base href="/">
</head>
<body>
    ...

<script type="text/javascript" src="assets/js/main.js" defer></script>
</body>
</html>

编辑：检查了 DevTools，它在 http://localhost:63342/app-folder/assets/libs/bootswatch-dist/css/bootstrap.min.css 处获取 CSS 文件，但在 http://localhost:63342/assets/libs/bootswatch-dist/css/bootstrap.min.css 处获取 JS 文件。这似乎是问题所在，但我不确定如何解决它。

Answer 1

您在将 <link> 设置为 CSS 后设置了 <base> 标签，因此，基础是 HTML 从中加载页面。此外，您将其设置为根 / 而不是页面本身（并且不调整您的 link）

修复 <link> 标签前的基础：

<base href="/app-folder/index.html">
<link rel="style sheet" href="assets/libs/bootswatch-dist/css/bootstrap.min.css">

或者到处使用绝对路径：

<!-- The slash in the beginning of the URL makes it absolute from the same server -->
<link rel="stylesheet" href="/app-folder/assets/libs/bootswatch-dist/css/bootstrap.min.css">

请注意，我显示的第一个基本标签是不必要的（因为它将它设置为与原来相同的东西），您可以将其删除。

<link rel="stylesheet" href="assets/libs/bootswatch-dist/css/bootstrap.min.css">

Answer 2

下面是我如何让它工作的。

当我告诉 PhpStorm 在 Chrome 中打开 index.html 时，它会在 localhost:XXXX/app-folder/index.html 处启动，其中 app-folder 只是 PhpStorm 中的项目文件夹。它基本上会启动自己的 built-in Web 服务器，这可能比直接在浏览器中访问文件要好。
然后我可以简单地将其重新键入为 localhost:XXXX/app-folder/，它将起作用（注意尾部的斜杠）。
此外，我必须将 base 设置为 /app-folder/ 并将其留在 <head>

我希望这对其他人有帮助。

为什么我的网络应用程序无法加载此脚本？

Why can't my web app load this script?

html

javascript

src

phpstorm

gulp