根据 dev 和 prod 环境获取根路由

Question

我想从站点根目录调用脚本和 css。

我有一个使用 wamp 的开发环境，所以我的路线是 localhost/mysite/js/script.js。
我的产品环境将是 mysite/js/script.js。

我想从根目录调用脚本，如果我不在根文件夹中并且不想使用，应该使用什么路径../？

这样做的原因是我想象一个更复杂的树状结构，我想避免过度 ../../../../[...] 我想知道是否有适合这个的东西。

假设我在 pages/contact.html 中有一个页面，我想调用 scripts/contact.js

如果我调用 scripts/contacts.js : 404 因为我在 pages 文件夹中。
如果我调用 /scripts/contacts.js ：它会在 mysite.com 中工作，但不会在本地工作，因为我需要调用 /mysite/scripts/contact.js.

感谢您的帮助。

Answer 1

如@peter-krebs 所述，最简洁的解决方案是启动一个独立的 Web 服务器来开发该项目。您可以按照建议使用 XAMPP，但容器化方法使用 Docker 可能更灵活。

或者，您可以将 <base href="/mysite/"> 标记添加到所有页面的头部，并将所有路径写为与该目录相关的路径。您必须使用此 relatively-absolute 指定 all 资源路径（js、css、图像、链接）虽然方法。这意味着您将无法再直接访问同一目录中的相关资源。

例如，如果 pages/contact.html 需要文件 pages/contact.js，则不能使用 contact.html 中的路径 ./contact.js。您将必须指定pages/contact.js，即使这些文件位于同一目录中。

当您将站点移至生产环境时，只需将基础更改为 <base href="/">，一切都会继续按预期运行。您甚至可以通过将以下脚本添加到文档头部以自动方式执行此操作。

<!DOCTYPE html>
<html>
  <head>
    <script>
      let base = document.createElement('base');
      base.href = (document.location.host == 'localhost') ? '/mysite/' : '/';
      document.currentScript.replaceWith(base);
    </script>
    ...

根据 dev 和 prod 环境获取根路由

Get root route depending on dev and prod environment

html

development-environment

wamp

path