有没有办法使用相对路径导出带有 CSS/图像/等的页面？答案

【问题标题】：Is there a way to export a page with CSS/images/etc using relative paths?有没有办法使用相对路径导出带有 CSS/图像/等的页面？
【发布时间】：2013-09-05 21:05:33
【问题描述】：

我在一个非常大的企业 Web 应用程序上工作 - 我创建了一个非常简单的原型 HTML 页面 - 它只是一个包含很少标记的 CSS 和 JS 列表。但是，它总共包含 57 个 CSS 包含和 271 个 javascript 包含（疯了吧？？）

在生产中，这些 CSS/JS 文件将被缩小并以各种方式组合，但出于开发目的，我不会打扰。

HTML 由一个简单的 apache HTTP 服务器提供服务，我使用如下 URL 访问它：http://localhost/demo.html，我将此链接分享给其他人，但您必须在防火墙后面才能访问它。

我想将这个 HTML 文件与所有引用的 JS 和 CSS 文件打包成一个 ZIP 文件并与其他人共享，这样大家只需解压缩并直接打开 HTML 文件。

我有两个问题：

CSS 文件使用类似 url(/path/to/image.png) 这样的 URL 引用图像，这些 URL 不是相对的，因此如果您解压缩并查看 HTML，这些链接将被破坏
实际上还有数以千计的其他 JS/CSS 文件/图像也位于演示不使用的相同文件夹中，因此仅压缩整个文件夹会导致 zip 文件非常臃肿

无论如何-

我定期创建这些类型的演示，是否有一些简单的方法可以创建 ZIP：

更新了使用相对 URL 的 CSS 文件
仅包含此 html 引用的 JS/CSS，以及仅包含特定 CSS 文件引用的那些图像

如果我可以在没有大量手动工作的情况下完成这项工作，如果它可以以某种方式自动完成，那就太棒了！

例如，一个 CSS 文件可能具有以下路径和文件名。

/ui/demoapp/css/theme.css

在这个 CSS 文件中，您会发现许多像这样的图像参考：

url(/ui/common/img/background.png)

我相信为了让这个工作，相对图像路径应该是这样的：

url(../../common/img/background.png)

【问题讨论】：

在您的文本编辑器中，尝试将 '/ui/' 替换为 '../../'？
@Torr3nt 这就是我现在所做的，其中涉及大量手动查找和替换 - 可能存在各种级别的嵌套，并在所有 CSS 文件上将 /ui/ 简单替换为 ../../并非在所有情况下都有效。
在您的编辑器中进行简单的搜索和替换比在 SO 上询问所花费的时间和精力更少。这个问题几乎不属于SO（回复：您需要一个专门的应用程序来完成您的要求）。 Compass extensions 可以做一些你要求的事情，但这需要手动进行大量的配置/转换。
@cimmanon 您可能对手动工作量是正确的（即通过 57 个 CSS 文件执行查找和替换，并手动将文件复制到 zip 文件中） - 但是正如我所指出的，这是我经常这样做，所以我正在寻找一种自动化的方式。它不一定需要是“专门的应用程序”，因为这是一个普遍问题，并且不依赖于 HTML 文件内容的细节。

标签： html css relative-path

【解决方案1】：

我将回答我自己的问题，因为我已经为自己的目的解决了这个问题。我发现有 2 个选项很有用：

现代浏览器在“文件”菜单下或 Chrome 中的一个菜单上有一个“将页面另存为...”选项。但是，当页面由 javascript 生成时，这并不总是能正常工作
我创建了自己的自定义应用程序，它可以解析所有 CSS/Javascript 资源并将 CSS 引用转换为相对 URL；但是，这对其他人来说并不是一个很好的答案。

如果其他人知道一个常用的实用程序或类似的东西，它比使用内置在“将页面另存为...”选项的浏览器更好 - 请随时发布另一个答案。

【讨论】：