WebStorm 项目目录作为本地服务器的资源根目录答案

【问题标题】：WebStorm project dir as Resource Root dir for local serverWebStorm 项目目录作为本地服务器的资源根目录
【发布时间】：2020-09-13 11:19:35
【问题描述】：

在我的例子中，项目结构如下：

/Users/myuser/WebstormProjects/project1
/Users/myuser/WebstormProjects/project1/index.html
/Users/myuser/WebstormProjects/project1/img/someimg.png

当我点击右上角短号的浏览器图标以在浏览器中打开 html 文件时

我像这样进入我的本地浏览器 URL：

http://localhost:63342/project1/index.html?_ijt=jfpl6u1husnai9t2635bb0gffs

对于部署，我在 index.html 中使用我的资源（例如图像等）的绝对路径，

<img src="/img/someimg.png">

我得到损坏的图像路径。对于这种情况，当在带有本地服务器的 html 代码 src="/img/someimg.png" 浏览器中将其视为 src="http://localhost:63342/img/someimg.png" 但在这种情况下根文件夹 URL 必须是 http://localhost:63342/project1/。

PS。尝试标记 project1 - 资源根不修复它。

【问题讨论】：

标签： webstorm

【解决方案1】：

资源 URL 中的前导斜杠告诉浏览器从 Web 服务器根目录解析 URL。内部 Web 服务器在使用“绝对”URL 时返回 404，因为它提供来自 localhost:port/project_name 而不是来自 localhost:port 的文件 - 它是一个简单的 Web 服务器，仅提供来自项目根文件夹的文件并且没有任何高级路由/文档根配置。如果您希望在内置 Web 服务器上托管您的应用程序时解析您的 URL，请使用相对于当前文件的 URL (<img src="path/relative/to/index.html")

如果更改 URL 不是一个选项，您可以使用不同的 Web 服务器来托管您的文件

【讨论】：

我只使用从服务器webroot到资源的绝对路径，我认为这在html中是一个很好的基调。奇怪的是为什么 WebStorm 不能像我可以用 php webserver php -S localhost:8000 -t /Users/myuser/WebstormProjects/project1 那样重新配置 webroot ？！！它在 php 中很简单，但对于 WebStorm 没有解决方案！