WebStorm 内置 Web 服务器为 index.html 中包含的每个 css 和 js 文件获取 404答案

【问题标题】：WebStorm built-in web server gets 404 for every css and js file included in index.htmlWebStorm 内置 Web 服务器为 index.html 中包含的每个 css 和 js 文件获取 404
【发布时间】：2015-11-29 14:57:28
【问题描述】：

为了后代，这是我的 index.html：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">
    <base href="/" />
    <title>Cart</title>
    <link href="content/external/bootstrap.css" rel="stylesheet" />
    <link href="content/external/bootstrap-theme.css" rel="stylesheet" />
    <link href="content/external/font-awesome.css" rel="stylesheet" />
    <link href="content/external/angular-toastr.css" rel="stylesheet" />
</head>
<body ng-app>

{{3+4}}

drfg



<script src="scripts/external/jquery-1.9.1.js"></script>
<script src="scripts/external/bootstrap.js"></script>
<script src="scripts/external/angular.js"></script>
<script src="scripts/external/angular-ui-router.js"></script>
<script src="scripts/external/angular-resource.js"></script>
<script src="scripts/external/angular-mocks.js"></script>
<script src="scripts/external/angular-toastr.tpls.js"></script>
<script src="scripts/external/angular-animate.js"></script>


</body>
</html>

每当我在 webstorm 中运行以在 chrome 中打开时，每个 javascript 和 css 文件都会得到 404。但是，如果我将范围限定到项目目录并运行节点的http-server，我的站点加载就好了。我似乎在与此相关的设置中找不到任何内容。有任何想法吗？

【问题讨论】：

失败时使用什么URL？我敢打赌它类似于http://localhost:63342/PROJECT_NAME/index.html。如果是这样 - 您正在使用 WebStorm 自己的简单内置 Web 服务器。从 URL 可以看出，它需要项目名称作为路径中的第一段。您的 <base href="/" /> 必须与此冲突 - 所以它会尝试像 localhost:63342/content/external/bootstrap.css 这样的路径，这是错误的。尝试不使用该标签。
哇，你完全正确。感谢您指出了这一点！想要将此作为答案提交吗？

标签： javascript html css server webstorm

【解决方案1】：

问题是由 index.html 中的标签引起的：

<base href="/"/>

告诉浏览器解析页面中相对于网络服务器根目录的所有 URL（使用内置网络服务器时为localhost:63342）。显然在那里找不到资源，因为内置的网络服务器提供来自http://localhost:63342/<project root> 的文件因此，您需要注释掉“<base href="/"/>”以使您的代码正常工作。或者，修改您的主机文件以使网络服务器从http://<some name>:63342 提供文件 - 请参阅http://youtrack.jetbrains.com/issue/WEB-8988#comment=27-577559

【讨论】：

是否可以在 webstorm 中改变这种行为？
请参见上文 - 您可以修改 hosts 文件以使网络服务器从 http://<some name>:63342 提供文件 - 参见 youtrack.jetbrains.com/issue/WEB-8988#comment=27-577559。或者，只需使用可以设置为从根目录提供文件的不同网络服务器
所以答案是否定的？ :)