Question

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

我还直接在Chrome中输入了index.html的网址并遇到了同样的问题，因此它不是PhpStorm的网络服务器。 CSS正在加载，因为我可以看到我在body编码的类似引导程序的导航栏。

<!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

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

在<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中的项目文件夹。它基本上启动了它自己的内置Web服务器，这可能比直接在浏览器中访问文件更好。
然后我可以简单地将其重新键入localhost:XXXX/app-folder/并且它会起作用（注意尾随斜杠）。
另外，我必须将base设为/app-folder/并将其保留在<head>

我希望这有助于其他人。

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

2 个答案: